/* ============================================================
   PENTA DE LE MAI — V2 brand foundation aligned
   Art gallery × independent magazine
   Updated 2026-05-13 per HANDOFF-WEB-BUILD.md
   ============================================================ */

/* ===== 1. Fonts (Google Fonts — load via <link> in HTML) ===== */
/* EB Garamond (heading) · Atkinson Hyperlegible (body) · JetBrains Mono (mono) */

/* ===== 2. Reset + tokens (brand foundation v0) ===== */
:root {
  /* Color palette */
  --ink: #1A1A1A;          /* near-black, không pure black */
  --ink-soft: #2C2A26;     /* dark warm gray (body alt) */
  --paper: #FAF8F4;        /* warm off-white, background mặc định */
  --paper-cool: #F2F0EB;   /* cooler off-white, section divide */
  --rule: #E8E4DC;         /* hairline divider */
  --accent-1: #7A6E5D;     /* umber muted (eyebrow, meta, tag) */
  --accent-2: #3E3528;     /* gỗ tối (highlight rare) */
  --meta: var(--accent-1); /* alias */
  --hairline: var(--rule); /* alias */
  --bg: var(--paper);
  --bg-pure: #FFFFFF;

  /* Typography */
  --font-heading: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-jp: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  --serif: var(--font-heading);
  --sans: var(--font-body);
  --display: var(--font-heading);

  /* Layout */
  --pad-mobile: 24px;
  --pad-tablet: 32px;
  --pad-desktop: 64px;

  --maxw-prose: 680px;
  --maxw-catalog: 720px;
  --maxw-page: 1280px;

  --gap: 32px;
  --hairline-width: 0.5px;

  /* Header height token (sticky offset) */
  --header-h: 94px;
}
@media (min-width: 1024px) {
  :root { --header-h: 100px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (min-width: 1024px) {
  html { font-size: 18px; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ===== 3. Typography scale (handoff section 3) ===== */

/* Eyebrow / tag — Atkinson 11-12px uppercase letter-spacing 0.14em weight 500 */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-1);
  font-weight: 500;
}

/* H1 hero — EB Garamond 64-96px weight 400-500 line-height 1.05 ls -0.005em */
.display-xl {
  font-family: var(--font-heading);
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-weight: 400;
}

/* H2 section — EB Garamond 36-48px weight 500 line-height 1.1 */
.display-l {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-weight: 500;
}

/* H3 sub — EB Garamond 24-28px weight 500 */
.display-m {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  font-weight: 500;
}
.display-s {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.25;
  color: var(--ink);
  font-weight: 500;
}

/* Lede — EB Garamond italic */
.lede {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
  font-weight: 400;
}

/* Body — Atkinson Hyperlegible 16-18px line-height 1.65 weight 400 */
.body-l {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
}
.body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
}
.body-s {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-1);
  font-weight: 400;
}

/* Mã hương — JetBrains Mono 13-14px weight 500 letter-spacing 0.04em */
.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-1);
}
.mono-l {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.vn-secondary {
  font-family: var(--font-body);
  font-size: 0.85em;
  color: var(--accent-1);
  line-height: 1.55;
  margin-top: 0.5em;
}

/* ===== 4. Layout primitives ===== */
.page {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding-left: var(--pad-mobile);
  padding-right: var(--pad-mobile);
}
@media (min-width: 768px) {
  .page { padding-left: var(--pad-tablet); padding-right: var(--pad-tablet); }
}
@media (min-width: 1280px) {
  .page { padding-left: var(--pad-desktop); padding-right: var(--pad-desktop); }
}

.section {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media (max-width: 768px) {
  .section { padding-top: 64px; padding-bottom: 64px; }
}

.section-divider {
  border: 0;
  border-top: var(--hairline-width) solid var(--hairline);
  margin: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 48px;
  gap: var(--gap);
  flex-wrap: wrap;
}
.section-header .eyebrow { flex: 0 0 auto; }
.section-header .index { font-family: var(--sans); font-size: 11px; color: var(--meta); letter-spacing: 0.1em; }

/* ===== 5. Header / Nav ===== */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: var(--hairline-width) solid var(--hairline);
  z-index: 100;
  padding: 20px var(--pad-mobile);
  /* prevent transform from breaking sticky context */
  will-change: auto;
}
@media (min-width: 768px) {
  .site-header { padding: 24px var(--pad-tablet); }
}
@media (min-width: 1280px) {
  .site-header { padding: 24px var(--pad-desktop); }
}

.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Full-bleed: bỏ max-width để menu trải dài mép paddings.
     Padding ngoài đã quản layout (var(--pad-desktop) = 64px). */
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 32px;
}
@media (min-width: 1280px) {
  .site-header-inner { gap: 48px; }
}
.site-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.site-logo img {
  height: 54px;       /* x3 size */
  width: auto;
  display: block;
}
@media (min-width: 1024px) {
  .site-logo img { height: 60px; }
}

.footer-brand__logo {
  margin: 0 0 20px 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.footer-brand__logo img {
  height: 84px;       /* x3 size */
  width: auto;
  display: block;
}
.site-nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
@media (min-width: 1280px) {
  .site-nav { gap: 40px; }
}
@media (min-width: 1600px) {
  .site-nav { gap: 56px; }
}
.site-nav a {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.3s ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.external::after {
  content: '↗';
  display: inline-block;
  margin-left: 4px;
  font-size: 0.9em;
}
@media (max-width: 767px) {
  .site-nav { display: none; }
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding: 8px 4px;
}
@media (max-width: 767px) {
  .menu-toggle { display: block; }
}

/* === Mobile menu overlay === */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 32px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-menu__close {
  position: absolute;
  top: 22px;
  right: var(--pad-mobile);
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding: 8px 4px;
}
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
}
.mobile-menu__nav a {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.mobile-menu__nav a:hover { opacity: 0.6; }
.mobile-menu__nav a.external {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-top: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
/* Hide mobile menu on desktop */
@media (min-width: 768px) {
  .mobile-menu { display: none !important; }
}

/* ===== 6. Hero (video-led) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(140px, 25vh, 260px);  /* nhích text lên ~25% từ đáy */
  overflow: hidden;
  background: #000;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, transparent 30%, rgba(0,0,0,0.55) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  color: white;
  padding: 0 var(--pad-mobile);
  max-width: var(--maxw-page);
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .hero__content { padding: 0 var(--pad-tablet); }
}
@media (min-width: 1280px) {
  .hero__content { padding: 0 var(--pad-desktop); }
}
.hero__tagline {
  color: white;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
  max-width: 800px;
}
.hero__caption {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 20px;
  color: rgba(255,255,255,0.85);
}

/* ===== 7. Manifesto pullquote (legacy block version) ===== */
.manifesto {
  background: var(--bg-pure);
  text-align: left;
}
.manifesto__inner {
  max-width: var(--maxw-prose);
  margin: 0 auto;
}
.manifesto__quote {
  font-family: var(--display);
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 40px;
}
.manifesto__attribution {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 32px;
  padding-top: 32px;
  border-top: var(--hairline-width) solid var(--hairline);
}

/* === 7b. Manifesto inline (compact, 1 hàng ngang) === */
.manifesto-inline {
  background: var(--bg-pure);
  padding: 64px 0;
  text-align: center;
}
@media (max-width: 768px) {
  .manifesto-inline { padding: 40px 0; }
}
.manifesto-inline__quote {
  font-family: var(--display);
  font-size: clamp(20px, 3.2vw, 44px);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: 100%;
  margin: 0 auto;
  white-space: normal;
}

/* === Section tight: full-bleed, không padding, mosaic đụng mép viewport === */
.section--tight {
  background: #000;
  color: #F8F6F1;
  padding: 0;
  margin: 0;
}
.section--tight .page {
  background: #000;
}

/* Mosaic bleed: bỏ padding 1px viền, gap 0 → cells dính sát nhau và sát mép viewport */
.mosaic--bleed {
  padding: 0 !important;
  gap: 0 !important;
}

/* === Section header inline: eyebrow trái + nút phải === */
.section-header--inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cta__button--inline {
  padding: 12px 28px;
  font-size: 11px;
  letter-spacing: 0.2em;
  margin: 0;
}

/* === Works row: 1 hàng 3 ảnh vuông === */
.works-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (min-width: 1024px) {
  .works-row { gap: 40px; }
}
@media (max-width: 640px) {
  .works-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.work-card--square .work-card__media {
  aspect-ratio: 1 / 1;
}

/* ===== 8. Works grid + Films grid (video shorts) ===== */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
}
@media (min-width: 768px) {
  .works-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
}
@media (min-width: 1280px) {
  .works-grid { grid-template-columns: repeat(4, 1fr); gap: 64px 40px; }
}

/* Films grid — video shorts vertical 9:16 */
.films-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 768px) {
  .films-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (min-width: 1280px) {
  .films-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

.film-card {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  display: block;
}
.film-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.film-card:hover video { transform: scale(1.05); }

.film-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  color: white;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.35) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}
.film-card__number {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}
.film-card__caption {
  font-family: var(--display);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
@media (max-width: 640px) {
  .film-card__overlay { padding: 10px 12px; }
  .film-card__caption { font-size: 13px; }
}

/* Films grid — featured row: 1 large + 2 stacked */
.films-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  .films-feature {
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
  }
  .films-feature .film-card:first-child {
    aspect-ratio: 16 / 12;
  }
}

/* ============================================================
   ABOUT PAGE — asymmetric editorial spread (Brewin Dolphin style)
   1 large image bên trái/phải + narrow text column đối diện
   ============================================================ */
.about-page {
  background: var(--paper);
  color: var(--ink);
}

.about-hero {
  padding: 120px 0 80px;
  text-align: center;
}
@media (max-width: 768px) {
  .about-hero { padding: 80px 0 56px; }
}
.about-hero .eyebrow { margin-bottom: 24px; }
.about-hero__title {
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}
.about-hero__sub {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--accent-1);
}

/* === Group layout: 1 sticky image left + 3 text sections scroll right === */
.about-group {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  padding: 120px var(--pad-desktop);
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 1024px) {
  .about-group {
    grid-template-columns: 1.3fr 1fr;
    padding: 100px var(--pad-tablet);
    gap: 56px;
  }
}
@media (max-width: 768px) {
  .about-group {
    grid-template-columns: 1fr;
    padding: 64px var(--pad-mobile);
    gap: 32px;
  }
}

.about-group__media {
  position: sticky;
  top: 100px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-cool);
}
@media (max-width: 768px) {
  .about-group__media {
    position: relative;
    top: 0;
    aspect-ratio: 4 / 5;
  }
}
.about-group__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-group__sections {
  display: flex;
  flex-direction: column;
  gap: 120px;
}
@media (max-width: 768px) {
  .about-group__sections { gap: 64px; }
}

.about-section-item {}

/* Legacy .about-spread vẫn giữ trong CSS để khỏi break các page khác — không dùng trên about nữa */
.about-spread {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 120px var(--pad-desktop);
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .about-spread {
    grid-template-columns: 1fr 1fr;
    padding: 100px var(--pad-tablet);
    gap: 56px;
  }
}
@media (max-width: 768px) {
  .about-spread {
    grid-template-columns: 1fr;
    padding: 64px var(--pad-mobile);
    gap: 40px;
  }
}

/* Alternate: section :nth-child(even) ↔ swap order */
.about-spread--alt .about-spread__media { order: 2; }
.about-spread--alt .about-spread__body { order: 1; }
@media (max-width: 768px) {
  .about-spread--alt .about-spread__media,
  .about-spread--alt .about-spread__body { order: unset; }
}

.about-spread__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-cool);
}
.about-spread__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-spread__body {
  max-width: 440px;
}
@media (min-width: 1280px) {
  .about-spread__body { max-width: 480px; }
}
.about-spread__eyebrow {
  margin-bottom: 32px;
}
.about-spread__chapter {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 36px;
  font-style: italic;
}
.about-prose p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 20px;
}
.about-prose p.en-block {
  color: var(--accent-1);
  font-size: clamp(14px, 1vw, 15px);
  font-style: italic;
  padding-top: 12px;
  margin-top: 12px;
  border-top: var(--hairline-width) solid var(--rule);
}

/* ============================================================
   PROJECTS SUB-NAV — sticky 19 perfume jump bar
   ============================================================ */
.projects-subnav {
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-h, 94px);  /* exactly below main site-header */
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--hairline-width) solid var(--rule);
  border-top: var(--hairline-width) solid var(--rule);
  margin-top: -1px;  /* overlap with section-divider above */
}

/* Anchor jump offset — section trượt xuống dưới sticky bars */
.perfume-feature {
  scroll-margin-top: calc(var(--header-h, 94px) + 56px);
}

.projects-subnav__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 0 var(--pad-mobile);
  scrollbar-width: thin;
}
@media (min-width: 768px) {
  .projects-subnav__track { padding: 0 var(--pad-tablet); }
}
@media (min-width: 1280px) {
  .projects-subnav__track { padding: 0 var(--pad-desktop); }
}
.projects-subnav__track::-webkit-scrollbar { height: 0; }

.projects-subnav__item {
  flex: 0 0 auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: var(--accent-1);
  text-decoration: none;
  border-right: var(--hairline-width) solid var(--rule);
  transition: color 0.3s ease, background 0.3s ease;
  min-width: 90px;
}
.projects-subnav__item:hover,
.projects-subnav__item.is-active {
  color: var(--ink);
  background: var(--paper-cool);
}
.projects-subnav__item .num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.projects-subnav__item .label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ============================================================
   PROJECTS PAGE — 19 perfume features (food™ mockup style)
   Big image LEFT + stack panels RIGHT (header / dark / shop)
   ============================================================ */

.perfumes-list {
  display: flex;
  flex-direction: column;
}

.perfume-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: 80vh;
  border-bottom: var(--hairline-width) solid var(--rule);
  background: var(--paper);
}
@media (max-width: 768px) {
  .perfume-feature {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

.perfume-feature--alt {
  grid-template-columns: 1fr 1.4fr;
}
.perfume-feature--alt .perfume-feature__media { order: 2; }
.perfume-feature--alt .perfume-feature__sidebar { order: 1; }
@media (max-width: 768px) {
  .perfume-feature--alt { grid-template-columns: 1fr; }
  .perfume-feature--alt .perfume-feature__media { order: 1; }
  .perfume-feature--alt .perfume-feature__sidebar { order: 2; }
}

/* Media side (LEFT big or RIGHT) */
.perfume-feature__media {
  position: relative;
  background: var(--paper-cool);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 480px;
}
.perfume-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
.perfume-feature__placeholder {
  position: absolute;
  inset: 0;
  background: var(--ink);
  color: rgba(250, 248, 244, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.perfume-feature__placeholder span {
  font-family: var(--font-heading);
  font-size: clamp(48px, 6vw, 96px);
  font-style: italic;
}

.perfume-feature__side-label {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left top;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.7);
  white-space: nowrap;
  z-index: 2;
  margin: 0;
  mix-blend-mode: difference;
}

.perfume-feature__caption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #FAF8F4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  mix-blend-mode: difference;
}

/* Sidebar (RIGHT or LEFT) — 3 stacked panels */
.perfume-feature__sidebar {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--paper);
}

/* Header panel */
.perfume-feature__header {
  padding: 48px 48px 40px;
  background: var(--paper);
}
@media (max-width: 768px) {
  .perfume-feature__header { padding: 32px 24px 24px; }
}
.perfume-feature__header .eyebrow {
  margin-bottom: 24px;
}
.perfume-feature__name {
  font-family: var(--font-heading);
  font-size: clamp(40px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: 400;
}
.perfume-feature__name-en {
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.6vw, 22px);
  font-style: italic;
  color: var(--accent-1);
  margin-bottom: 16px;
}
.perfume-feature__sub {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Dark middle panel */
.perfume-feature__panel-dark {
  background: var(--ink);
  color: #FAF8F4;
  padding: 40px 48px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 28px;
  min-height: 320px;
}
@media (max-width: 768px) {
  .perfume-feature__panel-dark { padding: 32px 24px; min-height: auto; }
}
.perfume-feature__panel-content .eyebrow {
  color: rgba(250, 248, 244, 0.6);
  margin-bottom: 16px;
}
.perfume-feature__materials {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #FAF8F4;
}

/* Divider giữa Materials và Observation trong dark panel */
.perfume-feature__divider {
  border: none;
  height: 0;
  border-top: var(--hairline-width) solid rgba(250, 248, 244, 0.18);
  margin: 24px 0 20px;
}

/* Eyebrow nhạt hơn cho Observation label */
.eyebrow--muted {
  color: rgba(250, 248, 244, 0.45);
  margin-bottom: 12px;
}

/* Observation quote — EB Garamond italic, đoạn cuối panel */
.perfume-feature__observation {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: rgba(250, 248, 244, 0.85);
}

.perfume-feature__panel-num {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-top: var(--hairline-width) solid rgba(250, 248, 244, 0.2);
  padding-top: 20px;
}
.perfume-feature__panel-num .num {
  font-family: var(--font-heading);
  font-size: clamp(72px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #FAF8F4;
  font-weight: 400;
}
.perfume-feature__panel-num .of {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.5);
  margin-left: auto;
}

/* Footer panel */
.perfume-feature__footer {
  padding: 24px 48px;
  background: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (max-width: 768px) {
  .perfume-feature__footer {
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
.perfume-feature__jp {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-1);
}
/* Two-button actions: Quan sát (ghost) + Shop (filled border) */
.perfume-feature__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .perfume-feature__actions {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
}

.perfume-feature__btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 0;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  transition: letter-spacing 0.35s ease, opacity 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}
.perfume-feature__btn:hover {
  letter-spacing: 0.24em;
}
.perfume-feature__btn--ghost {
  color: var(--accent-1);
  border-bottom-color: var(--accent-1);
}
.perfume-feature__btn--ghost:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.perfume-feature__btn--shop {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Legacy alias — keep for safety */
.perfume-feature__shop {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid var(--ink);
}

/* OLD perfume-spread style (legacy compat) */

.perfume-spread {
  display: grid;
  grid-template-columns: 100px 1.4fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 100px var(--pad-desktop);
  max-width: 1440px;
  margin: 0 auto;
  border-bottom: var(--hairline-width) solid var(--rule);
}
@media (max-width: 1024px) {
  .perfume-spread {
    grid-template-columns: 60px 1fr 1fr;
    padding: 80px var(--pad-tablet);
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .perfume-spread {
    grid-template-columns: 1fr;
    padding: 56px var(--pad-mobile);
    gap: 24px;
  }
}

/* Alt: số bên phải, image-info đảo */
.perfume-spread--alt {
  grid-template-columns: 1fr 1.4fr 100px;
}
.perfume-spread--alt .perfume-spread__number { order: 3; }
.perfume-spread--alt .perfume-spread__media { order: 2; }
.perfume-spread--alt .perfume-spread__body { order: 1; }
@media (max-width: 1024px) {
  .perfume-spread--alt { grid-template-columns: 1fr 1fr 60px; }
}
@media (max-width: 768px) {
  .perfume-spread--alt {
    grid-template-columns: 1fr;
  }
  .perfume-spread--alt .perfume-spread__number { order: 1; }
  .perfume-spread--alt .perfume-spread__media { order: 2; }
  .perfume-spread--alt .perfume-spread__body { order: 3; }
}

/* Number col */
.perfume-spread__number {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-heading);
}
.perfume-spread__num {
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-weight: 400;
}
.perfume-spread__num-line {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-top: 16px;
  padding-top: 12px;
  border-top: var(--hairline-width) solid var(--rule);
  width: 60px;
}

/* Media col */
.perfume-spread__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-cool);
}
.perfume-spread__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.perfume-spread:hover .perfume-spread__media img {
  transform: scale(1.03);
}

/* Placeholder dark when no image */
.perfume-spread__placeholder {
  width: 100%;
  height: 100%;
  background: var(--ink);
  color: rgba(250, 248, 244, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.perfume-spread__placeholder span {
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 64px);
  font-style: italic;
}

/* Body col */
.perfume-spread__body {
  display: flex;
  flex-direction: column;
}
.perfume-spread__eyebrow {
  margin-bottom: 28px;
}
.perfume-spread__name {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  font-weight: 400;
}
.perfume-spread__name-en {
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.6vw, 22px);
  font-style: italic;
  color: var(--accent-1);
  margin-bottom: 4px;
}
.perfume-spread__name-jp {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--accent-1);
  letter-spacing: 0.05em;
}
.perfume-spread__rule {
  border: 0;
  border-top: var(--hairline-width) solid var(--rule);
  margin: 28px 0;
  width: 60px;
}
.perfume-spread__theme {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.perfume-spread__theme-vi {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.perfume-spread__theme-en {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  font-weight: 500;
}
.perfume-spread__code {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent-1);
}
.perfume-spread__materials-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-bottom: 12px;
}
.perfume-spread__materials {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* OLD catalog grid (no longer used but keep for compat) */
.projects-page {
  background: var(--paper);
  color: var(--ink);
}

.projects-hero {
  padding: 120px 0 80px;
  text-align: center;
}
@media (max-width: 768px) {
  .projects-hero { padding: 80px 0 56px; }
}
.projects-hero .eyebrow { margin-bottom: 24px; }
.projects-hero__title {
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}
.projects-hero__sub {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--accent-1);
}

.projects-grid-section {
  padding: 80px 0 120px;
}
@media (max-width: 768px) {
  .projects-grid-section { padding: 40px 0 64px; }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1280px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
  .projects-grid { grid-template-columns: 1fr; gap: 12px; }
}

.project-card {
  position: relative;
  aspect-ratio: 3 / 4;
  display: block;
  overflow: hidden;
  background: var(--ink);  /* dark default for no-image cards */
  color: #FAF8F4;
  text-decoration: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover { transform: translateY(-4px); }

.project-card.has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.project-card.has-image:hover::before { transform: scale(1.05); }

.project-card.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.2) 50%,
    rgba(0,0,0,0.75) 100%);
}

.project-card__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 24px;
}
.project-card:not(.has-image) .project-card__inner {
  justify-content: center;
  align-items: flex-start;
}

.project-card__code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(250, 248, 244, 0.6);
  margin-bottom: 12px;
}
.project-card__name {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #FAF8F4;
  margin-bottom: 8px;
  font-weight: 400;
}
.project-card__name .en {
  display: block;
  font-size: 0.6em;
  font-style: italic;
  color: rgba(250, 248, 244, 0.6);
  margin-top: 4px;
}
.project-card__theme {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.7);
}

@media (max-width: 480px) {
  .project-card { aspect-ratio: 16 / 11; }
  .project-card__name { font-size: 22px; }
  .project-card__inner { padding: 20px; }
}

/* Closing block */
.about-closing {
  padding: 120px 0 80px;
  text-align: center;
  background: var(--paper-cool);
}
@media (max-width: 768px) {
  .about-closing { padding: 80px 0 56px; }
}
.about-closing__inner {
  max-width: 800px;
  margin: 0 auto;
}
.about-closing__quote {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.35;
  color: var(--ink);
  font-style: italic;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
}
.about-closing__quote-en {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--accent-1);
  font-style: italic;
  margin-top: 20px;
}

/* ============================================================
   INVOCATION — poetic CTA section dẫn về Scent Projects
   Đặt sau mosaic, trước exhibitions
   ============================================================ */
.invocation {
  background: var(--paper);
  padding: 120px 0;
  text-align: center;
  color: var(--ink);
}
@media (max-width: 768px) {
  .invocation { padding: 80px 0; }
}

.invocation__inner {
  max-width: 720px;
  margin: 0 auto;
}

.invocation__quote {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 38px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 56px;
}
@media (max-width: 640px) {
  .invocation__quote {
    font-size: clamp(20px, 5vw, 26px);
    margin-bottom: 40px;
  }
}

.invocation__link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ink);
  transition: letter-spacing 0.5s ease, gap 0.5s ease;
}
.invocation__link:hover {
  letter-spacing: 0.3em;
  gap: 12px;
}
.invocation__link span {
  font-size: 14px;
  transition: transform 0.5s ease;
  display: inline-block;
}
.invocation__link:hover span {
  transform: translate(3px, -3px);
}

/* ============================================================
   MOSAIC — editorial portfolio layout (4 rows x 5 cols)
   Mix photo + video + text quote
   ============================================================ */
.mosaic {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    "a a b c c"
    "d d e f g"
    "h h i i j"
    "k l l m j"
    "n n o p p"
    "q r r s t";
  gap: 1px;                       /* hairline gap giữa cells */
  background: #000;               /* nền đen, gap = đen tạo divider tối */
  aspect-ratio: 5 / 6;            /* 5 cols × 6 rows */
  padding: 1px;                    /* viền đen bao quanh mosaic */
}

.mosaic > * {
  background: #000;                /* cell background = đen */
  overflow: hidden;
  position: relative;
}

.cell-a { grid-area: a; }
.cell-b { grid-area: b; }
.cell-c { grid-area: c; }
.cell-d { grid-area: d; }
.cell-e { grid-area: e; }
.cell-f { grid-area: f; }
.cell-g { grid-area: g; }
.cell-h { grid-area: h; }
.cell-i { grid-area: i; }
.cell-j { grid-area: j; }
.cell-k { grid-area: k; }
.cell-l { grid-area: l; }
.cell-m { grid-area: m; }
.cell-n { grid-area: n; }
.cell-o { grid-area: o; }
.cell-p { grid-area: p; }
.cell-q { grid-area: q; }
.cell-r { grid-area: r; }
.cell-s { grid-area: s; }
.cell-t { grid-area: t; }

/* Photo cells */
.mosaic-photo img,
.mosaic-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.mosaic-photo:hover img,
.mosaic-photo:hover video {
  transform: scale(1.04);
}

/* Quote cells — serif italic editorial pullquote on dark */
.mosaic-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  color: #FAF8F4;
  background: #000;
}
.mosaic-quote__mark {
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 1;
  color: #FAF8F4;
  margin-bottom: 18px;
  opacity: 0.5;
}
.mosaic-quote__text {
  font-family: var(--font-heading);
  font-size: clamp(17px, 1.4vw, 24px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-transform: none;
  line-height: 1.35;
  color: #FAF8F4;
  max-width: 360px;
}
.mosaic-quote__attribution {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.55);
  font-style: normal;
}

@media (max-width: 640px) {
  .mosaic-quote { padding: 20px 16px; }
  .mosaic-quote__text { font-size: 17px; letter-spacing: -0.005em; }
  .mosaic-quote__attribution { font-size: 10px; letter-spacing: 0.16em; }
  .mosaic-quote__mark { font-size: 28px; margin-bottom: 12px; }
}

/* Video cell special — small play indicator */
.mosaic-video::after {
  content: '';
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
  pointer-events: none;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Mobile: simplify mosaic to single column linear */
@media (max-width: 768px) {
  .mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
    aspect-ratio: auto;
    gap: 2px;
  }
  .mosaic > * {
    grid-area: auto !important;
    aspect-ratio: 4 / 3;
  }
  .mosaic .cell-d { aspect-ratio: 16 / 9; }   /* video horizontal */
  .mosaic .cell-j { aspect-ratio: 9 / 16; }   /* video vertical tall */
  .mosaic .cell-k { aspect-ratio: 1 / 1; }    /* video square */
  /* Quote cells mobile: bỏ aspect-ratio fixed, để content tự fit, padding generous */
  .mosaic-quote {
    aspect-ratio: auto !important;
    padding: 80px 32px !important;
    min-height: 320px;
  }
  .mosaic-quote__text {
    font-size: clamp(20px, 5.5vw, 28px) !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
  }
  .mosaic-quote__attribution {
    margin-top: 24px !important;
    font-size: 11px !important;
  }
  .mosaic-quote__mark {
    font-size: 36px !important;
    margin-bottom: 24px !important;
  }
}

.work-card {
  display: block;
  position: relative;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover { transform: translateY(-4px); }
.work-card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--hairline);
  margin-bottom: 16px;
}
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover .work-card__media img { transform: scale(1.04); }
.work-card__number {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--meta);
  margin-bottom: 6px;
}
.work-card__title {
  font-family: var(--display);
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.work-card__note {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--meta);
  font-style: italic;
}

/* ============================================================
   ESSAYS PAGE — magazine list editorial (2 categories)
   ============================================================ */
.essays-page { background: var(--paper); }

.essays-hero {
  padding: clamp(80px, 12vh, 140px) 0 clamp(60px, 8vh, 100px);
}
.essays-hero .page {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 0 var(--pad-mobile);
}
@media (min-width: 768px) {
  .essays-hero .page { padding: 0 var(--pad-tablet); }
}
@media (min-width: 1280px) {
  .essays-hero .page { padding: 0 var(--pad-desktop); }
}
.essays-hero__title {
  margin-top: 16px;
  margin-bottom: 12px;
}
.essays-hero__sub {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--accent-1);
  max-width: 540px;
}

/* Sticky subnav — 2 category filter bar */
.essays-subnav {
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-h, 94px);
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--hairline-width) solid var(--rule);
  border-top: var(--hairline-width) solid var(--rule);
  margin-top: -1px;
}
.essays-subnav__track {
  display: flex;
  gap: 0;
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 0 var(--pad-mobile);
}
@media (min-width: 768px) {
  .essays-subnav__track { padding: 0 var(--pad-tablet); }
}
@media (min-width: 1280px) {
  .essays-subnav__track { padding: 0 var(--pad-desktop); }
}
.essays-subnav__item {
  flex: 0 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--accent-1);
  text-decoration: none;
  border-right: var(--hairline-width) solid var(--rule);
  transition: color 0.3s ease, background 0.3s ease;
}
.essays-subnav__item:hover,
.essays-subnav__item.is-active {
  color: var(--ink);
  background: var(--paper-cool);
}
.essays-subnav__item .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.essays-subnav__item .label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Section wrapper — 1 per category */
.essays-section {
  padding: clamp(60px, 10vh, 120px) 0;
  scroll-margin-top: calc(var(--header-h, 94px) + 56px);
}
.essays-section .page {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 0 var(--pad-mobile);
}
@media (min-width: 768px) {
  .essays-section .page { padding: 0 var(--pad-tablet); }
}
@media (min-width: 1280px) {
  .essays-section .page { padding: 0 var(--pad-desktop); }
}
.essays-section__header { margin-bottom: 48px; }
.essays-section__title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  font-weight: 500;
  margin: 16px 0 12px;
}
.essays-section__sub {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--accent-1);
  max-width: 580px;
}

/* ============================================================
   ESSAY MAGAZINE — featured cards (homepage) + list cards (category page)
   ============================================================ */

/* Block header — eyebrow + title trái, "See all" phải */
.essays-block {
  padding: clamp(60px, 10vh, 120px) 0;
  scroll-margin-top: calc(var(--header-h, 94px) + 56px);
}
.essays-block .page {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 0 var(--pad-mobile);
}
@media (min-width: 768px) {
  .essays-block .page { padding: 0 var(--pad-tablet); }
}
@media (min-width: 1280px) {
  .essays-block .page { padding: 0 var(--pad-desktop); }
}
.essays-block__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.essays-block__title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  font-weight: 500;
  margin-top: 12px;
}
.essays-block__see-all {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--ink);
  transition: letter-spacing 0.35s ease;
  white-space: nowrap;
}
.essays-block__see-all:hover { letter-spacing: 0.24em; }

/* Featured cards grid (homepage — 3 columns desktop) */
.essay-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 1024px) {
  .essay-features { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .essay-features { grid-template-columns: 1fr; gap: 32px; }
}

.essay-feature {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.essay-feature:hover { transform: translateY(-4px); }

.essay-feature__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-cool);
  margin-bottom: 20px;
}
.essay-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.essay-feature:hover .essay-feature__media img { transform: scale(1.04); }

.essay-feature__num {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #FAF8F4;
  background: rgba(26, 26, 26, 0.7);
  padding: 4px 8px;
  backdrop-filter: blur(4px);
}

.essay-feature__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.essay-feature__meta { margin-bottom: 4px; }
.essay-feature__title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--ink);
}
.essay-feature__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 4px;
}
.essay-feature__more {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-top: 8px;
  transition: color 0.3s ease, gap 0.3s ease;
}
.essay-feature:hover .essay-feature__more { color: var(--ink); }

/* List cards (category page — 2 columns desktop, smaller) */
.essay-list-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 40px;
}
@media (max-width: 768px) {
  .essay-list-cards { grid-template-columns: 1fr; gap: 40px; }
}

.essay-list-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 640px) {
  .essay-list-card { grid-template-columns: 1fr; gap: 16px; }
}
.essay-list-card:hover { transform: translateY(-2px); }

.essay-list-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-cool);
  position: relative;
}
.essay-list-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.essay-list-card:hover .essay-list-card__media img { transform: scale(1.04); }

.essay-list-card__body { display: flex; flex-direction: column; gap: 10px; }
.essay-list-card__meta { color: var(--accent-1); }
.essay-list-card__meta .num { font-family: var(--font-mono); margin-right: 4px; }
.essay-list-card__title {
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--ink);
}
.essay-list-card__excerpt {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Back link in hero (category page) */
.essays-hero__back {
  color: var(--accent-1);
  text-decoration: none;
  transition: color 0.3s ease;
}
.essays-hero__back:hover { color: var(--ink); }

/* Essay list — editorial rows */
.essay-list {
  display: flex;
  flex-direction: column;
  border-top: var(--hairline-width) solid var(--rule);
}
.essay-row {
  display: grid;
  grid-template-columns: 56px 120px 1fr 32px;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  border-bottom: var(--hairline-width) solid var(--rule);
  transition: padding 0.3s ease, background 0.3s ease;
  text-decoration: none;
  color: var(--ink);
}
@media (max-width: 768px) {
  .essay-row {
    grid-template-columns: 40px 1fr 24px;
    gap: 16px;
    padding: 20px 0;
  }
}
.essay-row:hover {
  background: var(--paper-cool);
  padding-left: 16px;
  padding-right: 16px;
}
.essay-row__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-1);
  letter-spacing: 0.08em;
}
.essay-row__cat {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}
@media (max-width: 768px) {
  .essay-row__cat { display: none; }
}
.essay-row__title {
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.essay-row__arrow {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--accent-1);
  text-align: right;
  transition: transform 0.3s ease, color 0.3s ease;
}
.essay-row:hover .essay-row__arrow {
  color: var(--ink);
  transform: translate(4px, -4px);
}

/* ============================================================
   ESSAY DETAIL PAGE — long-form bilingual editorial
   VN block trước, EN block sau italic accent. Hairline divider.
   ============================================================ */
.essay-detail { background: var(--paper); }

/* HERO — asymmetric: text trái, image phải (desktop) */
.essay-detail__hero {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: end;
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) var(--pad-mobile) clamp(60px, 8vh, 100px);
}
@media (min-width: 768px) {
  .essay-detail__hero { padding-left: var(--pad-tablet); padding-right: var(--pad-tablet); }
}
@media (min-width: 1280px) {
  .essay-detail__hero { padding-left: var(--pad-desktop); padding-right: var(--pad-desktop); gap: 80px; }
}
@media (max-width: 768px) {
  .essay-detail__hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.essay-detail__hero-text { display: flex; flex-direction: column; gap: 16px; }

.essay-detail__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.essay-detail__back {
  color: var(--accent-1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.essay-detail__back:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.essay-detail__sep { color: var(--rule); }

.essay-detail__title {
  font-family: var(--font-heading);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.essay-detail__subtitle {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  color: var(--accent-1);
  margin: 0;
}
.essay-detail__years {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.7em;
  letter-spacing: 0.04em;
  margin-left: 6px;
  color: var(--accent-1);
}

.essay-detail__hero-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-cool);
  margin: 0;
}
.essay-detail__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* BODY — long-form 680px max */
.essay-detail__body {
  padding: clamp(40px, 6vh, 80px) 0 clamp(60px, 10vh, 120px);
}
.essay-detail__body-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-mobile);
}
@media (min-width: 768px) {
  .essay-detail__body-inner { padding: 0 var(--pad-tablet); }
}

/* Per-language block */
.essay-detail__lang { display: flex; flex-direction: column; gap: 20px; }
.essay-detail__lang p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
}

.essay-detail__h2 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
}

/* EN block: italic + nhạt + smaller */
.essay-detail__lang--en p {
  font-style: italic;
  font-size: clamp(15px, 1.05vw, 16px);
  color: var(--accent-1);
}
.essay-detail__h2--en {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-1);
  font-size: clamp(20px, 2vw, 26px);
}

/* Hairline divider giữa VN và EN block */
.essay-detail__lang-divider {
  border: none;
  border-top: var(--hairline-width) solid var(--rule);
  margin: 48px 0;
  position: relative;
}
.essay-detail__lang-divider::after {
  content: "VN ‖ EN";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--accent-1);
}

/* CTA footer per essay */
.essay-detail__cta {
  padding: clamp(40px, 6vh, 80px) 0 clamp(80px, 12vh, 140px);
}
.essay-detail__cta-inner {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 0 var(--pad-mobile);
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .essay-detail__cta-inner { padding: 0 var(--pad-tablet); }
}
.essay-detail__credit {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}
.essay-detail__cta-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.essay-detail__cta-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--ink);
  transition: letter-spacing 0.35s ease;
}
.essay-detail__cta-btn:hover { letter-spacing: 0.24em; }
.essay-detail__cta-btn--back {
  color: var(--accent-1);
  border-bottom-color: var(--accent-1);
}
.essay-detail__cta-btn--back:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Citation footer per essay (image source + fair use credit) */
.essay-detail__citation {
  padding: clamp(24px, 4vh, 40px) 0;
}
.essay-detail__citation-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-mobile);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px) {
  .essay-detail__citation-inner { padding: 0 var(--pad-tablet); }
}
.essay-detail__citation-text {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.65;
  color: var(--accent-1);
  margin: 0;
}
.essay-detail__citation-text[lang="en"] {
  font-style: italic;
  color: var(--accent-1);
  opacity: 0.85;
}
.essay-detail__citation-text em {
  font-style: italic;
}
.essay-detail__citation-text a {
  color: var(--accent-1);
  border-bottom: 1px solid var(--accent-1);
  transition: opacity 0.2s ease;
}
.essay-detail__citation-text a:hover { opacity: 0.7; }

/* ===== 9. Essays list ===== */
.essays-list {
  display: grid;
  gap: 64px;
}
@media (min-width: 1024px) {
  .essays-list { gap: 80px; }
}

.essay-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .essay-card {
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
  }
  .essay-card:nth-child(even) {
    direction: rtl;
  }
  .essay-card:nth-child(even) > * { direction: ltr; }
}

.essay-card__media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--hairline);
}
.essay-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.essay-card:hover .essay-card__media img { transform: scale(1.03); }

.essay-card__meta {
  display: flex;
  gap: 16px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 16px;
}
.essay-card__title {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.essay-card__dek {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.essay-card__read {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  display: inline-block;
}

/* ===== 10. Exhibitions chronological list ===== */
.exhibitions {
  background: var(--ink);
  color: #E8E5DD;
}
.exhibitions .eyebrow { color: rgba(255,255,255,0.6); }
.exhibitions .section-header .index { color: rgba(255,255,255,0.5); }
.exhibitions-list { display: flex; flex-direction: column; }
.exhibition-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: var(--hairline-width) solid rgba(255,255,255,0.1);
  align-items: baseline;
  transition: padding-left 0.4s ease;
}
.exhibition-item:hover { padding-left: 12px; }
.exhibition-item__year {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
}
.exhibition-item__title {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  color: #F8F6F1;
  letter-spacing: -0.005em;
}
.exhibition-item__venue {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-align: right;
}
@media (max-width: 640px) {
  .exhibition-item { grid-template-columns: 60px 1fr; gap: 12px; }
  .exhibition-item__venue { grid-column: 1 / 3; padding-left: 60px; text-align: left; margin-top: -8px; }
}

/* ===== 11. CTA strip ===== */
.cta {
  background: var(--bg-pure);
  text-align: center;
}
.cta__inner {
  max-width: 640px;
  margin: 0 auto;
}
.cta__title {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 56px);
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.cta__button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px 40px;
  border: 1px solid var(--ink);
  color: var(--ink);
  margin-top: 16px;
  transition: all 0.4s ease;
}
.cta__button:hover {
  background: var(--ink);
  color: var(--bg);
  letter-spacing: 0.28em;
}

/* ===== 12. Footer ===== */
.site-footer {
  padding: 60px var(--pad-mobile) 40px;
  border-top: var(--hairline-width) solid var(--hairline);
  background: var(--bg);
}
@media (min-width: 768px) {
  .site-footer { padding: 80px var(--pad-tablet) 40px; }
}
@media (min-width: 1280px) {
  .site-footer { padding: 80px var(--pad-desktop) 40px; }
}
.site-footer__inner {
  max-width: var(--maxw-page);
  margin: 0 auto;
  display: grid;
  gap: 48px;
}
@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.footer-brand .display-s { margin-bottom: 12px; }
.footer-brand p { font-size: 14px; line-height: 1.6; max-width: 360px; color: var(--meta); }
.footer-col h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--ink); }

.footer-bottom {
  max-width: var(--maxw-page);
  margin: 60px auto 0;
  padding-top: 32px;
  border-top: var(--hairline-width) solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--meta);
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom__lemai {
  color: var(--meta);
  text-decoration: none;
  letter-spacing: 0.12em;
  transition: color 0.3s ease;
}
.footer-bottom__lemai:hover { color: var(--ink); }

/* ============================================================
   PROJECT DETAIL — 7 trang section accordion
   Pattern: hero typography lớn + sub-menu 4 button bordered
   + accordion (open/close) + fragrance pyramid dark panel
   + closing CTA. Voice "Language of [quality]".
   Added 2026-05-13 per memory project_penta_detail_pages.md
   ============================================================ */

/* ----- 01 · HERO ----- */
.project-detail__hero {
  padding: 72px 0 56px;
  background: var(--paper);
}
.project-detail__hero-inner {
  text-align: left;
  max-width: var(--maxw-page);
}
.project-detail__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 8px;
}
.project-detail__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(72px, 14vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.project-detail__name-vi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(22px, 3.4vw, 34px);
  color: var(--ink-soft);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.project-detail__name-vi .jp {
  font-family: var(--font-jp);
  font-style: normal;
  font-size: 1em;
  letter-spacing: 0;
}
.project-detail__quality {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 18px;
}
.project-detail__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.project-detail__meta .dot { opacity: 0.55; }
@media (min-width: 768px) {
  .project-detail__hero { padding: 96px 0 72px; }
}

/* ----- Sub-menu (sticky anchor nav) ----- */
.project-detail__subnav {
  position: sticky;
  top: var(--header-h, 94px);
  z-index: 40;
  background: var(--paper);
  border-top: var(--hairline-width) solid var(--rule);
  border-bottom: var(--hairline-width) solid var(--rule);
  padding: 14px 0;
}
.project-detail__subnav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.project-detail__subnav-item {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ink);
  padding: 8px 16px;
  border: var(--hairline-width) solid var(--ink);
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.project-detail__subnav-item:hover {
  background: var(--ink);
  color: var(--paper);
}
@media (min-width: 768px) {
  .project-detail__subnav { padding: 18px 0; }
  .project-detail__subnav-inner { gap: 14px; }
  .project-detail__subnav-item { padding: 10px 22px; font-size: 13px; }
}

/* ----- Sections (accordion + dark pyramid) ----- */
.project-detail__section {
  border-bottom: var(--hairline-width) solid var(--rule);
}
/* Constrain accordion content to same max-width as .page for alignment with hero */
.project-detail__section > .project-detail__accordion {
  max-width: var(--maxw-page);
  margin-left: auto;
  margin-right: auto;
}
.project-detail__section--dark {
  background: var(--ink);
  color: var(--paper);
  border-bottom: none;
  padding: 48px 0;
}
@media (min-width: 768px) {
  .project-detail__section--dark { padding: 56px 0; }
}
.project-detail__section--echoes {
  background: var(--paper-cool);
  border-bottom: none;
}
.project-detail__section--echoes .project-detail__accordion[open] {
  background: var(--paper-cool);
}

/* ----- Accordion (details/summary native) ----- */
.project-detail__accordion {
  padding: 0;
}
.project-detail__accordion[open] {
  background: var(--paper-cool);
  border-radius: 8px;
}
.project-detail__accordion-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px var(--pad-mobile);
  font-family: var(--font-body);
  font-size: clamp(28px, 5.5vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: opacity 0.2s ease;
  scroll-margin-top: calc(var(--header-h, 94px) + 80px);
}
.project-detail__accordion-head::-webkit-details-marker { display: none; }
.project-detail__accordion-head:hover { opacity: 0.78; }
.project-detail__accordion-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  line-height: 1;
}
.project-detail__accordion-title .en {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.project-detail__accordion-title .vi {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 0.42em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--meta);
}
.project-detail__accordion-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.project-detail__accordion-icon .chev { display: block; }
.project-detail__accordion-icon .cross { display: none; }
.project-detail__accordion[open] .project-detail__accordion-icon .chev { display: none; }
.project-detail__accordion[open] .project-detail__accordion-icon .cross { display: block; }

.project-detail__accordion-body {
  padding: 0 var(--pad-mobile) 56px;
  max-width: 880px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .project-detail__accordion-head { padding: 56px var(--pad-tablet); font-size: clamp(40px, 7vw, 80px); }
  .project-detail__accordion-body { padding: 0 var(--pad-tablet) 72px; }
}
@media (min-width: 1024px) {
  .project-detail__accordion-head { padding: 64px var(--pad-desktop); }
  .project-detail__accordion-body { padding: 0 var(--pad-desktop) 88px; }
}

.project-detail__qa { margin-bottom: 24px; }
.project-detail__qa--second { margin-top: 48px; padding-top: 32px; border-top: var(--hairline-width) solid var(--rule); }
.project-detail__q {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 6px;
}
.project-detail__q.vi { color: var(--ink-soft); font-style: italic; }

.project-detail__sublabel {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--meta);
  margin: 24px 0 18px;
  padding-top: 16px;
  border-top: var(--hairline-width) solid var(--rule);
}

.project-detail__prose p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 16px;
}
.project-detail__prose p.vi {
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
}
.project-detail__prose p.en {
  color: var(--ink-soft);
  font-style: italic;
}
.project-detail__prose p.vi + p.en,
.project-detail__prose p.en + p.vi { margin-top: 18px; }

.project-detail__list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.project-detail__list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  padding: 8px 0 8px 18px;
  position: relative;
  border-bottom: var(--hairline-width) solid var(--rule);
}
.project-detail__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--meta);
}
.project-detail__list.vi li {
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
}
.project-detail__list.en li { color: var(--ink-soft); font-style: italic; }

.project-detail__media-row {
  margin: 0 calc(-1 * var(--pad-mobile)) 32px;
}
.project-detail__media-row img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--paper-cool);
}
@media (min-width: 768px) {
  .project-detail__media-row { margin: 0 calc(-1 * var(--pad-tablet)) 40px; }
}
@media (min-width: 1024px) {
  .project-detail__media-row { margin: 0 calc(-1 * var(--pad-desktop)) 48px; }
}

/* ----- Wide accordion body (more breathing for media-heavy sections) ----- */
.project-detail__accordion-body--wide {
  max-width: 1100px;
}

/* ----- Media (figures, varied aspect ratios) ----- */
.project-detail__media {
  margin: 0 auto 32px;
  display: block;
  overflow: hidden;
  background: var(--paper-cool);
}
.project-detail__media img,
.project-detail__media video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.project-detail__media--square video {
  aspect-ratio: 1 / 1;
}
.project-detail__media--landscape img {
  aspect-ratio: 16 / 9;
}
.project-detail__media--portrait img {
  aspect-ratio: 4 / 5;
}
.project-detail__media--square img {
  aspect-ratio: 1 / 1;
}
.project-detail__media--banner img {
  aspect-ratio: 21 / 9;
}
.project-detail__media--full-bleed {
  margin-left: calc(-1 * var(--pad-mobile));
  margin-right: calc(-1 * var(--pad-mobile));
  width: auto;
}
@media (min-width: 768px) {
  .project-detail__media--full-bleed {
    margin-left: calc(-1 * var(--pad-tablet));
    margin-right: calc(-1 * var(--pad-tablet));
  }
}
@media (min-width: 1024px) {
  .project-detail__media--full-bleed {
    margin-left: calc(-1 * var(--pad-desktop));
    margin-right: calc(-1 * var(--pad-desktop));
  }
}

/* Diptych (2 images, varied sizes) */
.project-detail__diptych {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 64px 0 40px;
}
@media (min-width: 768px) {
  .project-detail__diptych {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    align-items: end;
    margin: 96px 0 56px;
  }
  .project-detail__diptych .project-detail__media {
    margin-bottom: 0;
  }
}

/* ----- Pull quote (large serif italic, break visual rhythm) ----- */
.project-detail__pullquote {
  margin: 48px auto;
  padding: 24px 0;
  border-top: var(--hairline-width) solid var(--rule);
  border-bottom: var(--hairline-width) solid var(--rule);
  text-align: center;
  max-width: 760px;
}
.project-detail__pullquote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 36px);
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.project-detail__pullquote p.en {
  font-size: clamp(18px, 2.6vw, 26px);
  color: var(--ink-soft);
  margin-top: 10px;
}
.project-detail__pullquote--small p {
  font-size: clamp(20px, 2.8vw, 28px);
}
.project-detail__pullquote--small p.en {
  font-size: clamp(15px, 2vw, 20px);
}
@media (min-width: 768px) {
  .project-detail__pullquote {
    margin: 64px auto;
    padding: 32px 0;
  }
}

/* ----- Centered prose (narrower max-width for reading rhythm) ----- */
.project-detail__prose--centered {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}
.project-detail__prose--centered p { font-size: 17px; }
@media (min-width: 768px) {
  .project-detail__prose--centered p { font-size: 19px; }
  .project-detail__prose--centered p.en { font-size: 17px; }
}

/* Strong tag for ngôi 1 signature emphasis */
.project-detail__prose strong {
  font-weight: 500;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--ink);
}
.project-detail__prose p.en strong {
  font-style: italic;
}

/* ----- Closing media banner ----- */
.project-detail__closing .project-detail__media--banner {
  margin: 48px auto;
  max-width: 1100px;
}
.project-detail__closing-bridge {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
  display: grid;
  gap: 12px;
  margin-bottom: 48px;
}
.project-detail__closing-bridge .project-detail__closing-body {
  margin-bottom: 4px;
}
.project-detail__closing-bridge .project-detail__closing-body.vi {
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.7;
}
.project-detail__closing-bridge .project-detail__closing-body.en {
  font-style: italic;
  font-size: 16px;
}

/* ----- 05 · KEY NOTE (Fragrance Pyramid) ----- */
.project-detail__pyramid-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px var(--pad-mobile);
}
.project-detail__dark-head {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: var(--hairline-width) solid rgba(250, 248, 244, 0.25);
}
.project-detail__dark-title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 7vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.project-detail__dark-title .en {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.22em;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: rgba(250, 248, 244, 0.55);
  line-height: 1;
}
.project-detail__pyramid-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.55);
  margin-bottom: 16px;
}
.project-detail__pyramid-title {
  font-family: var(--font-heading);
  font-size: clamp(17px, 2.1vw, 23px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--paper);
  margin-bottom: 32px;
  max-width: 640px;
  display: grid;
  gap: 6px;
}
.project-detail__pyramid-title .vi { color: var(--paper); font-style: normal; }
.project-detail__pyramid-title .en { color: rgba(250, 248, 244, 0.7); font-style: italic; }

.project-detail__pyramid {
  display: grid;
  gap: 1px;
  background: rgba(250, 248, 244, 0.18);
  border-top: var(--hairline-width) solid rgba(250, 248, 244, 0.35);
  border-bottom: var(--hairline-width) solid rgba(250, 248, 244, 0.35);
}
.project-detail__pyramid-row {
  background: var(--ink);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 16px 0;
}
.project-detail__pyramid-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.6);
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.project-detail__pyramid-label .vi { color: var(--paper); font-style: normal; }
.project-detail__pyramid-label .en { color: rgba(250, 248, 244, 0.45); }
.project-detail__pyramid-label .en::before { content: '· '; opacity: 0.5; }
.project-detail__pyramid-notes {
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  line-height: 1.5;
}
.project-detail__pyramid-notes span {
  position: relative;
}
.project-detail__pyramid-notes span:not(:last-child)::after {
  content: '·';
  margin-left: 14px;
  color: rgba(250, 248, 244, 0.4);
}
@media (min-width: 768px) {
  .project-detail__pyramid-inner { padding: 24px var(--pad-tablet); }
  .project-detail__pyramid-row {
    grid-template-columns: 160px 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 20px 0;
  }
}
@media (min-width: 1024px) {
  .project-detail__pyramid-inner { padding: 32px var(--pad-desktop); }
  .project-detail__pyramid-row { grid-template-columns: 180px 1fr; padding: 22px 0; }
}

/* ----- 06 · CLOSING / TALK TO US ----- */
.project-detail__closing {
  padding: 72px 0 96px;
  background: var(--paper-cool);
}
.project-detail__closing-inner {
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}
.project-detail__closing-head {
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: var(--hairline-width) solid var(--rule);
}
.project-detail__closing-title {
  font-size: clamp(36px, 7vw, 72px);
  line-height: 0.95;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 16px;
}
.project-detail__closing-title .en {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--ink);
}
.project-detail__closing-title .vi {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 0.42em;
  color: var(--meta);
  text-transform: none;
}
.project-detail__closing-quote {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 18px;
}
.project-detail__closing-quote.en {
  color: var(--ink-soft);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px);
}
.project-detail__closing-rule {
  width: 60px;
  border: none;
  border-top: var(--hairline-width) solid var(--meta);
  margin: 40px auto;
}
.project-detail__closing-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.project-detail__closing-body.vi {
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
}
.project-detail__closing-body.en {
  color: var(--ink-soft);
  font-style: italic;
}

.project-detail__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
}
.project-detail__cta-shop,
.project-detail__cta-talk {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 14px 28px;
  border: var(--hairline-width) solid var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.project-detail__cta-shop:hover,
.project-detail__cta-talk:hover {
  background: transparent;
  color: var(--ink);
}
.project-detail__cta-back {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 14px 28px;
  border: var(--hairline-width) solid var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.project-detail__cta-back:hover {
  background: transparent;
  color: var(--ink);
}

/* Language divider — hairline between VN block and EN block */
.project-detail__lang-divider {
  border: none;
  border-top: var(--hairline-width) solid var(--rule);
  max-width: 100px;
  margin: 56px auto;
}
@media (min-width: 768px) {
  .project-detail__lang-divider { margin: 72px auto; }
}

/* ----- Catalog nav (19 perfume horizontal list, sau echoes trước footer) ----- */
.project-catalog-nav {
  background: var(--paper-cool);
  border-top: var(--hairline-width) solid var(--rule);
  border-bottom: var(--hairline-width) solid var(--rule);
}
.project-catalog-nav__inner {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.project-catalog-nav__inner::-webkit-scrollbar {
  height: 4px;
}
.project-catalog-nav__inner::-webkit-scrollbar-thumb {
  background: var(--rule);
}
.project-catalog-nav__item {
  flex: 0 0 auto;
  min-width: 140px;
  padding: 22px 22px 24px;
  border-right: var(--hairline-width) solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease;
}
.project-catalog-nav__item:first-child {
  border-left: var(--hairline-width) solid var(--rule);
}
.project-catalog-nav__item:hover {
  background: var(--paper-cool);
}
.project-catalog-nav__item.is-active {
  background: var(--paper-cool);
}
.project-catalog-nav__number {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--meta);
}
.project-catalog-nav__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  white-space: nowrap;
}
.project-catalog-nav__item.is-active .project-catalog-nav__number,
.project-catalog-nav__item.is-active .project-catalog-nav__name {
  color: var(--ink);
}
@media (min-width: 768px) {
  .project-catalog-nav__item { min-width: 160px; padding: 26px 28px 28px; }
  .project-catalog-nav__name { font-size: 15px; }
}

/* Page wrapping padding (use --pad-* tokens) */
body.project-detail .page {
  padding-left: var(--pad-mobile);
  padding-right: var(--pad-mobile);
}
@media (min-width: 768px) {
  body.project-detail .page { padding-left: var(--pad-tablet); padding-right: var(--pad-tablet); }
}
@media (min-width: 1024px) {
  body.project-detail .page { padding-left: var(--pad-desktop); padding-right: var(--pad-desktop); }
}


/* ==========================================================================
   SERIES LANDING (page /series)
   Header mirror /projects + 4 numbered poster sections (museum/exposició style)
   Each section: eyebrow + title VN + big number + bilingual meta (2 col) + content
   ========================================================================== */

/* Body padding parity with project-detail */
body.series-landing .page,
body.series-detail .page {
  padding-left: var(--pad-mobile);
  padding-right: var(--pad-mobile);
}
@media (min-width: 768px) {
  body.series-landing .page,
  body.series-detail .page { padding-left: var(--pad-tablet); padding-right: var(--pad-tablet); }
}
@media (min-width: 1024px) {
  body.series-landing .page,
  body.series-detail .page { padding-left: var(--pad-desktop); padding-right: var(--pad-desktop); }
}

/* ----- POSTER SECTION (1 per series) ----- */
.series-poster {
  padding: 80px 0;
  background: var(--paper);
}
@media (max-width: 768px) {
  .series-poster { padding: 56px 0; }
}

/* Head block: eyebrow + title-row + 2x hr with bilingual meta in between */
.series-poster__head {
  margin-bottom: 56px;
}
@media (max-width: 768px) {
  .series-poster__head { margin-bottom: 40px; }
}

.series-poster__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 24px;
}

.series-poster__title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 40px;
}
@media (max-width: 600px) {
  .series-poster__title-row { gap: 12px; margin-bottom: 28px; }
}

.series-poster__title-block { min-width: 0; }
.series-poster__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  text-transform: none;
}
.series-poster__title-sub {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(34px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin: 10px 0 0;
  text-transform: none;
}

.series-poster__num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(96px, 18vw, 220px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--ink);
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
@media (max-width: 600px) {
  .series-poster__num { font-size: clamp(72px, 22vw, 120px); }
}

.series-poster__rule {
  border: 0;
  border-top: var(--hairline-width) solid var(--rule);
  margin: 0;
}

.series-poster__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 20px 0;
}
@media (max-width: 600px) {
  .series-poster__meta { grid-template-columns: 1fr; gap: 18px; padding: 16px 0; }
}

.series-poster__meta-col { }

.series-poster__meta-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 8px;
}

.series-poster__meta-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.series-poster__meta-text.vi {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
}
.series-poster__meta-text.en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Body of poster: either 4-card grid or single feature */
.series-poster__body {
  margin-top: 48px;
}
@media (max-width: 768px) {
  .series-poster__body { margin-top: 32px; }
}
.series-poster__body--single { }

/* Single feature card (Visual / Time Capsule / Try Me) */
.series-poster__feature {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.series-poster__feature:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
}

.series-poster__feature-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper-cool);
}
.series-poster__feature-media img,
.series-poster__feature-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.series-poster__feature:hover .series-poster__feature-media img,
.series-poster__feature:hover .series-poster__feature-media video {
  transform: scale(1.05);
}

/* Hero media video variant (for Time Capsule page) */
.series-detail__hero-media--video {
  aspect-ratio: 16 / 9;
}
.series-detail__hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder variant — dark background with JP + EN text */
.series-poster__feature-media--placeholder {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px;
}
.series-poster__placeholder-jp {
  font-family: var(--font-jp);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.85;
  text-align: center;
}
.series-poster__placeholder-en {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  letter-spacing: 0.04em;
  opacity: 0.9;
}

.series-poster__feature-body {
  padding: 32px 28px 40px;
  border-top: var(--hairline-width) solid var(--rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 768px) {
  .series-poster__feature-body { padding: 40px 40px 48px; }
}

.series-poster__feature-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 8px;
}

.series-poster__feature-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}

.series-poster__feature-sub {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  opacity: 0.9;
  margin: 14px 0 0;
}

/* ----- GRID ----- */
.series-grid {
  display: grid;
  gap: 28px;
}
.series-grid--four { grid-template-columns: 1fr; }
.series-grid--two  { grid-template-columns: 1fr; }
.series-grid--one  { grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; }

@media (min-width: 600px) {
  .series-grid--four { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .series-grid--two  { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (min-width: 1024px) {
  .series-grid--four { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .series-grid--two  { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ----- CARD ----- */
.series-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 8px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  overflow: hidden;
}
.series-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
}

.series-card__media {
  position: relative;
  overflow: hidden;
  background: var(--paper-cool);
}
.series-card__media--square { aspect-ratio: 1 / 1; }
.series-card__media--wide   { aspect-ratio: 16 / 9; }
.series-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.series-card:hover .series-card__media img {
  transform: scale(1.05);
}

/* Placeholder (Try Me Me Try card — no image yet) */
.series-card__media--placeholder {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
}
.series-card__placeholder-jp {
  font-family: var(--font-jp);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
.series-card__placeholder-en {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* Card body */
.series-card__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: var(--hairline-width) solid var(--rule);
  background: var(--paper);
  flex: 1;
}
@media (min-width: 768px) {
  .series-card__body { padding: 28px 28px 32px; gap: 10px; }
}

.series-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 4px;
}
.series-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 6px;
}
.series-card__title--large {
  font-size: clamp(28px, 3.2vw, 40px);
}
.series-card__sub {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.series-card__sub.vi {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--ink);
}
.series-card__sub.en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  opacity: 0.85;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.series-card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent-1);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: var(--hairline-width) solid var(--rule);
  text-transform: uppercase;
}

/* Feature card variant (single big) */
.series-card--feature .series-card__body {
  padding: 36px 28px 40px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .series-card--feature .series-card__body {
    padding: 48px 48px 56px;
  }
}
.series-card--feature .series-card__meta {
  border-top: 0;
  padding-top: 0;
  margin-top: 8px;
}


/* ==========================================================================
   SERIES DETAIL (Time Capsule, Visual Memory, Try Me Me Try detail pages)
   Pattern: hero (text-only mirror /projects) + sections + optional form + closing
   ========================================================================== */

/* ----- HERO ----- */
.series-detail__hero {
  padding: 120px 0 80px;
  text-align: center;
}
@media (max-width: 768px) {
  .series-detail__hero { padding: 80px 0 56px; }
}
.series-detail__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 28px;
}
.series-detail__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.series-detail__title-sub {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.05;
  color: var(--ink-soft);
  margin: 12px 0 36px;
}
.series-detail__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.series-detail__meta .dot {
  opacity: 0.55;
}

/* ----- SECTION ----- */
.series-detail__section {
  padding: 96px 0;
}
@media (max-width: 768px) {
  .series-detail__section { padding: 64px 0; }
}
.series-detail__section--form {
  background: var(--paper-cool);
}
.series-detail__section--echoes {
  background: var(--paper-cool);
  padding: 64px 0 96px;
}
@media (max-width: 768px) {
  .series-detail__section--echoes { padding: 48px 0 72px; }
}

.series-detail__section-inner {
  max-width: 900px;
  margin: 0 auto;
}
.series-detail__section-inner--narrow {
  max-width: 640px;
  text-align: center;
}

.series-detail__section-head {
  margin-bottom: 40px;
}
.series-detail__section-head--center {
  text-align: center;
  margin-bottom: 56px;
}
.series-detail__section-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 18px;
}
.series-detail__section-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.series-detail__section-title-sub {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* ----- PROSE (manifesto bilingual) ----- */
.series-detail__prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
}
.series-detail__prose .vi {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.series-detail__prose .en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
  margin: 0;
}

.series-detail__lang-divider {
  border: 0;
  border-top: var(--hairline-width) solid var(--rule);
  width: 100px;
  margin: 48px auto;
}

/* ----- PULLQUOTE ----- */
.series-detail__pullquote {
  margin: 0 0 40px;
  padding: 32px 0;
  border-top: var(--hairline-width) solid var(--rule);
  border-bottom: var(--hairline-width) solid var(--rule);
  text-align: center;
}
.series-detail__pullquote p {
  margin: 0;
}
.series-detail__pullquote p.vi {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 8px;
}
.series-detail__pullquote p.en {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ----- CTA ----- */
.series-detail__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.series-detail__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: var(--hairline-width) solid var(--ink);
  transition: background 0.3s ease, color 0.3s ease;
}
.series-detail__cta:hover {
  background: var(--paper);
  color: var(--ink);
}
.series-detail__cta--back {
  background: var(--paper);
  color: var(--ink);
}
.series-detail__cta--back:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ==========================================================================
   CAPSULE FORM (Time Capsule submission form)
   ========================================================================== */
.capsule-form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 768px) {
  .capsule-form { gap: 32px; }
}

.capsule-form__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.capsule-form__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-heading);
}
.capsule-form__label .vi {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}
.capsule-form__label .en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.capsule-form__label .en em {
  font-style: italic;
  opacity: 0.7;
}

.capsule-form__input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.capsule-form__input:focus {
  outline: 0;
  border-color: var(--ink);
  background: #EFEDE7;
}
.capsule-form__input::placeholder {
  color: var(--accent-1);
  opacity: 0.55;
  font-style: italic;
}

.capsule-form__input--select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231A1A1A' stroke-width='1.2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}

.capsule-form__input--textarea {
  resize: vertical;
  min-height: 160px;
  font-family: var(--font-heading);
}

.capsule-form__hint {
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.75;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.capsule-form__hint .vi {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-soft);
}
.capsule-form__hint .en {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.85;
}

.capsule-form__actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.capsule-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: var(--hairline-width) solid var(--ink);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.capsule-form__submit:hover {
  background: var(--paper);
  color: var(--ink);
}
.capsule-form__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.capsule-form__submit-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.capsule-form__submit-label .vi {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 400;
}
.capsule-form__submit-label .en {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.85;
}

.capsule-form__status,
.capsule-form__error {
  margin-top: 8px;
  padding: 24px 28px;
  border: var(--hairline-width) solid var(--rule);
  border-radius: 6px;
  background: var(--paper-cool);
  text-align: center;
}
.capsule-form__status .vi,
.capsule-form__error .vi {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 6px;
}
.capsule-form__status .en,
.capsule-form__error .en {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}
.capsule-form__error {
  border-color: #B85450;
}
.capsule-form__error .vi {
  color: #B85450;
}

/* ----- Radio button group (used in share-form) ----- */
.capsule-form__radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.capsule-form__radio {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.capsule-form__radio:hover {
  border-color: var(--ink);
  background: #EFEDE7;
}
.capsule-form__radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: var(--hairline-width) solid var(--ink);
  border-radius: 50%;
  background: var(--bg-pure);
  cursor: pointer;
  position: relative;
  margin: 0;
  transform: translateY(2px);
}
.capsule-form__radio input[type="radio"]:checked {
  background: var(--ink);
  box-shadow: inset 0 0 0 3px var(--bg-pure);
}
.capsule-form__radio input[type="radio"]:checked + .vi {
  font-weight: 500;
}
.capsule-form__radio .vi {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 15px;
  color: var(--ink);
  display: block;
  line-height: 1.35;
}
.capsule-form__radio .en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-soft);
  display: block;
  line-height: 1.4;
  margin-top: 3px;
  grid-column: 2;
}
.capsule-form__radio:has(input:checked) {
  border-color: var(--ink);
  background: var(--paper-cool);
}

/* Share section variant */
.series-detail__section--share {
  background: var(--paper);
}
.share-form {
  margin-top: 48px;
}

/* ==========================================================================
   ESSAYS — Hub + detail pages
   ========================================================================== */
body.essays-landing .page,
body.essay-detail .page {
  padding-left: var(--pad-mobile);
  padding-right: var(--pad-mobile);
}
@media (min-width: 768px) {
  body.essays-landing .page,
  body.essay-detail .page { padding-left: var(--pad-tablet); padding-right: var(--pad-tablet); }
}
@media (min-width: 1024px) {
  body.essays-landing .page,
  body.essay-detail .page { padding-left: var(--pad-desktop); padding-right: var(--pad-desktop); }
}

/* Essay category section in hub */
.essay-cat-section { padding: 64px 0 48px; }
@media (max-width: 768px) { .essay-cat-section { padding: 48px 0 32px; } }
.essay-cat-section__head { margin-bottom: 40px; }
.essay-cat-section__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 8px 0 6px;
}
.essay-cat-section__sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0;
}

.essay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 600px) { .essay-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .essay-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.essay-card {
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.essay-card:hover { border-color: var(--ink); transform: translateY(-4px); }

.essay-card__media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
}
.essay-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.essay-card:hover .essay-card__media img { transform: scale(1.05); }

.essay-card__body {
  padding: 22px 22px 26px;
  border-top: var(--hairline-width) solid var(--rule);
  background: var(--paper);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.essay-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.essay-card__desc {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Essay detail body — long-form 680px */
.essay-body {
  padding: 56px 0 80px;
}
@media (max-width: 768px) { .essay-body { padding: 40px 0 56px; } }
.essay-body__inner {
  max-width: 680px;
  margin: 0 auto;
}
.essay-body__inner p {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 22px;
}
.essay-body__image {
  margin: 40px -24px;
  background: var(--paper-cool);
}
@media (min-width: 768px) {
  .essay-body__image { margin: 56px 0; border-radius: 8px; overflow: hidden; }
}
.essay-body__image img {
  width: 100%; height: auto; display: block;
}


/* ==========================================================================
   OLFACTORY LENS — 19 observations × 4 steps per episode
   ========================================================================== */
.chapter--lens .chapter__quote { display: none; }

.lens-trailer {
  margin: 24px 0 32px;
  padding: 24px 28px;
  background: var(--paper-cool);
  border-left: 2px solid var(--accent-1);
  border-radius: 6px;
}
.lens-trailer p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 8px;
}
.lens-trailer p.vi { color: var(--ink); }
.lens-trailer p.en {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.85;
  margin-bottom: 0;
}

.lens-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 0 28px;
}
.lens-step {
  padding: 22px 24px;
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 8px;
}
@media (min-width: 768px) {
  .lens-step { padding: 28px 32px; }
}

.lens-step__label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: var(--hairline-width) solid var(--rule);
}
.lens-step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent-1);
}
.lens-step__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.lens-step__title em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-soft);
  margin-left: 4px;
  letter-spacing: 0.02em;
}
.lens-step__vn {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 14px;
}
.lens-step__en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: 0.005em;
}

.lens-perfume-link {
  margin-top: 24px;
  padding-top: 20px;
  border-top: var(--hairline-width) solid var(--rule);
  text-align: right;
}


/* ==========================================================================
   VISUAL MEMORY — Hub catalog grid + detail page
   ========================================================================== */

body.visual-landing .page,
body.visual-detail .page {
  padding-left: var(--pad-mobile);
  padding-right: var(--pad-mobile);
}
@media (min-width: 768px) {
  body.visual-landing .page,
  body.visual-detail .page { padding-left: var(--pad-tablet); padding-right: var(--pad-tablet); }
}
@media (min-width: 1024px) {
  body.visual-landing .page,
  body.visual-detail .page { padding-left: var(--pad-desktop); padding-right: var(--pad-desktop); }
}

.visual-grid-section {
  padding: 64px 0 80px;
}
@media (max-width: 768px) {
  .visual-grid-section { padding: 40px 0 56px; }
}

.visual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 600px) {
  .visual-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (min-width: 1024px) {
  .visual-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.visual-card {
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.visual-card:hover {
  border-color: var(--ink);
  transform: translateY(-4px);
}

.visual-card__link {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.visual-card__media {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink);
}
.visual-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.visual-card:hover .visual-card__media img { transform: scale(1.05); }

.visual-card__body {
  padding: 24px 22px 28px;
  border-top: var(--hairline-width) solid var(--rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.visual-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
}
.visual-card__title-alt {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}
.visual-card__desc {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 24px;
  flex: 1;
}

.visual-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: var(--hairline-width) solid var(--rule);
}
@media (min-width: 600px) {
  .visual-card__actions { flex-direction: row; }
}

.visual-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.visual-card__btn--ghost {
  color: var(--ink);
  background: transparent;
  border: var(--hairline-width) solid var(--ink);
}
.visual-card__btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
}
.visual-card__btn--solid {
  color: var(--paper);
  background: var(--ink);
  border: var(--hairline-width) solid var(--ink);
}
.visual-card__btn--solid:hover {
  background: var(--paper);
  color: var(--ink);
}

/* Detail page hero media */
.visual-detail__hero-media {
  margin: 0;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 40px;
  background: var(--paper-cool);
}
.visual-detail__hero-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .visual-detail__hero-media { margin-bottom: 64px; }
}

/* Detail page gallery (5 ảnh tác phẩm phụ) */
.visual-gallery {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .visual-gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 1024px) {
  .visual-gallery { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.visual-gallery__item {
  margin: 0;
  background: var(--paper-cool);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.visual-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.visual-gallery__item:hover img { transform: scale(1.05); }


/* ==========================================================================
   AUDIO TOGGLE WIDGET — floating bottom-right (theme music for episodes)
   ========================================================================== */
.audio-player-host {
  position: fixed;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.audio-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 24px;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease;
  opacity: 0.88;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.audio-toggle:hover { opacity: 1; transform: translateY(-2px); }
.audio-toggle.is-playing {
  background: var(--accent-2);
}
.audio-toggle__icon {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  width: 14px;
  text-align: center;
}
.audio-toggle__label { line-height: 1; }
@media (max-width: 600px) {
  .audio-toggle {
    bottom: 16px;
    right: 16px;
    padding: 11px 14px;
    font-size: 10px;
    border-radius: 22px;
  }
  .audio-toggle__label { display: none; }
  .audio-toggle__icon { font-size: 13px; width: 13px; }
}


/* Video grid (EP3 timelapse YouTube embeds) */
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
.video-grid__item {
  margin: 0;
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.video-grid__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.video-grid__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-grid__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-1);
  padding: 14px 18px;
  border-top: var(--hairline-width) solid var(--rule);
  margin: 0;
}

/* Time-band group title (EP1 — Sáng/Chiều/Tối/Khuya/Khác divider) */
.time-band-title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--accent-1);
  margin: 56px 0 32px;
  padding-top: 32px;
  border-top: var(--hairline-width) solid var(--rule);
  text-align: left;
  letter-spacing: 0.005em;
}
.chapters-content > .time-band-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
@media (min-width: 768px) {
  .time-band-title { margin-top: 72px; }
}


/* ==========================================================================
   SERIES DETAIL — Episode page additions (Olfactory Memory episodes)
   ========================================================================== */

/* Full-bleed hero image after hero text */
.series-detail__hero-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-cool);
}
.series-detail__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sticky sub-menu (overview · context · visit · echoes) */
.series-detail__subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--paper);
  border-top: var(--hairline-width) solid var(--rule);
  border-bottom: var(--hairline-width) solid var(--rule);
}
.series-detail__subnav-inner {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.series-detail__subnav-item {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 16px 12px;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--ink);
  text-decoration: none;
  border-right: var(--hairline-width) solid var(--rule);
  transition: background 0.25s ease;
}
.series-detail__subnav-item:last-child { border-right: 0; }
.series-detail__subnav-item:hover { background: var(--paper-cool); }
@media (max-width: 600px) {
  .series-detail__subnav-item { padding: 12px 8px; font-size: 12px; }
}

/* Info section variant (lighter padding) */
.series-detail__section--info {
  background: var(--paper);
}

/* Visit info card (event info structured rows) */
.visit-card {
  margin: 32px 0 0;
  border-top: var(--hairline-width) solid var(--rule);
}
.visit-card__row {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: var(--hairline-width) solid var(--rule);
}
@media (max-width: 768px) {
  .visit-card__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }
}
.visit-card__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0;
}
.visit-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
.visit-card__text.vi {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--ink);
}
.visit-card__text.en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 13px;
}

/* Credit line (small attribution) */
.series-detail__credit {
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--accent-1);
  text-align: center;
  margin: 32px 0 24px;
  opacity: 0.85;
}

/* CTA row variations */
.series-detail__cta-row--secondary {
  margin-top: 16px;
  gap: 12px;
}
.series-detail__cta--ghost {
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 4px;
}
.series-detail__cta--ghost:hover {
  background: transparent;
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* Hero media variant: square 1:1 (for ep2 1920x1920) */
.series-detail__hero-media--square {
  aspect-ratio: 1 / 1;
  max-height: 80vh;
}


/* ==========================================================================
   EPISODE PAGE — Zones (4 emotional zones grid)
   ========================================================================== */
.zones-grid {
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--hairline-width) solid var(--rule);
  border-bottom: var(--hairline-width) solid var(--rule);
}
@media (min-width: 768px) {
  .zones-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
}

.zone-card {
  padding: 36px 28px 40px;
  border-bottom: var(--hairline-width) solid var(--rule);
}
.zone-card:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  .zone-card {
    padding: 40px 36px 48px;
    border-right: var(--hairline-width) solid var(--rule);
  }
  .zone-card:nth-child(even) { border-right: 0; }
  .zone-card:nth-last-child(-n+2) { border-bottom: 0; }
}

.zone-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 14px;
}
.zone-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
}
.zone-card__title-en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.zone-card__intro {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: var(--hairline-width) solid var(--rule);
}

.scent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scent-list li {
  display: grid;
  grid-template-columns: 56px 1fr 1fr;
  gap: 12px;
  padding: 9px 0;
  align-items: baseline;
  border-bottom: var(--hairline-width) solid var(--rule);
}
.scent-list li:last-child { border-bottom: 0; }
.scent-list .code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-1);
  text-align: left;
}
.scent-list .vn {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}
.scent-list .en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}


/* ==========================================================================
   EPISODE PAGE — Chapters (10 diary quote blocks)
   ========================================================================== */
.series-detail__section--chapters {
  background: var(--paper);
}

.chapter {
  margin: 0 0 64px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.chapter:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .chapter { margin-bottom: 80px; }
}

.chapter__head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: var(--hairline-width) solid var(--rule);
}
.chapter__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 8px;
}
.chapter__date {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.chapter__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.chapter__title-en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--ink-soft);
  margin: 6px 0 0;
  letter-spacing: 0.02em;
}

.chapter__intro {
  margin: 0 0 24px;
  padding: 0 0 16px;
  border-bottom: var(--hairline-width) dashed var(--rule);
}
.chapter__intro .vi {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.chapter__quote {
  margin: 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--rule);
  background: transparent;
}
@media (min-width: 768px) {
  .chapter__quote { padding-left: 32px; }
}

.chapter__quote p {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 18px;
}
.chapter__quote p:last-of-type { margin-bottom: 12px; }
.chapter__quote em {
  font-style: italic;
}

.chapter__sig {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-1);
  text-align: right;
  font-style: normal;
}

.chapter--heavy .chapter__quote {
  border-left-color: var(--ink);
}
.chapter--ngan .chapter__quote {
  border-left: 0;
  padding-left: 0;
  text-align: left;
}
.chapter--ngan .chapter__quote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 19px);
}

/* Chapter image break (full-width within section) */
.chapter-image {
  margin: 64px -24px;
  background: var(--paper-cool);
  overflow: hidden;
}
@media (min-width: 768px) {
  .chapter-image { margin: 80px -32px; }
}
@media (min-width: 1024px) {
  .chapter-image { margin: 96px -64px; }
}
.chapter-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-height: 80vh;
}


/* ==========================================================================
   EPISODE PAGE — Letter to viewers
   ========================================================================== */
.series-detail__section--letter {
  background: var(--paper);
}

.letter-quote {
  margin: 0;
  padding: 40px 32px;
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 8px;
}
@media (min-width: 768px) {
  .letter-quote { padding: 56px 56px 48px; }
}
.letter-quote p {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 18px;
}
.letter-quote p:last-of-type { margin-bottom: 28px; }
.letter-quote__sig {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  text-align: right;
  border-top: var(--hairline-width) solid var(--rule);
  padding-top: 20px;
  margin: 0;
}


/* ==========================================================================
   EPISODE PAGE — Gallery grid (10 installation frames at end)
   ========================================================================== */
.series-detail__section--gallery {
  background: var(--paper);
}
.ep-gallery {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 768px) {
  .ep-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media (min-width: 1024px) {
  .ep-gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}
.ep-gallery__item {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-cool);
}
.ep-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ep-gallery__item:hover img {
  transform: scale(1.05);
}


/* ==========================================================================
   EPISODE PAGE V3 — Chapter menu (sticky sidebar) + Work cards + Zones
   ========================================================================== */

/* ----- Chapters layout: sidebar trái + content (desktop), stacked (mobile) ----- */
.chapters-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 56px;
}
@media (min-width: 1024px) {
  .chapters-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
  }
}
@media (min-width: 1280px) {
  .chapters-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 80px;
  }
}

/* ----- Chapter menu (sticky) ----- */
.chapters-menu {
  position: sticky;
  top: calc(var(--header-h) + 60px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 80px);
  overflow-y: auto;
  padding: 24px 0;
  border-top: var(--hairline-width) solid var(--rule);
  border-bottom: var(--hairline-width) solid var(--rule);
}
@media (max-width: 1023px) {
  .chapters-menu {
    position: relative;
    top: 0;
    max-height: none;
    overflow-y: visible;
    border: var(--hairline-width) solid var(--rule);
    background: var(--bg-pure);
    padding: 20px 24px;
  }
}

.chapters-menu__title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 16px;
}

.chapters-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.chapters-menu__list li { margin: 0; }
.chapters-menu__list a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  color: var(--ink);
  border-bottom: var(--hairline-width) solid var(--rule);
  transition: color 0.2s ease;
  align-items: baseline;
}
.chapters-menu__list li:last-child a { border-bottom: 0; }
.chapters-menu__list a:hover {
  color: var(--accent-1);
}
.chapters-menu__list .num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-1);
}
.chapters-menu__list .lbl {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}

/* ----- Chapters content area ----- */
.chapters-content { min-width: 0; }

/* Override chapter wrapper inside chapters-content (no max-width center) */
.chapters-content .chapter {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.chapters-content .chapter-image {
  margin-left: -24px;
  margin-right: -24px;
}
@media (min-width: 768px) {
  .chapters-content .chapter-image {
    margin-left: -32px;
    margin-right: -32px;
  }
}
@media (min-width: 1024px) {
  .chapters-content .chapter-image {
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: 16 / 9;
  }
  .chapters-content .chapter-image img {
    aspect-ratio: 16 / 9;
  }
}


/* ==========================================================================
   WORK CARDS (chai mùi tác phẩm cho mỗi chương)
   ========================================================================== */

.chapter__works {
  margin: 32px 0 0;
  padding: 28px 0 0;
  border-top: var(--hairline-width) solid var(--rule);
}

.chapter__works-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 20px;
}

.chapter__works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .chapter__works-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

.work-card {
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 6px;
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.work-card:hover {
  border-color: var(--ink);
  background: #EFEDE7;
}

.work-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent-1);
  margin: 0 0 10px;
}
.work-card__name-vn {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.work-card__name-en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 4px 0 12px;
  letter-spacing: 0.01em;
}
.work-card__family {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: var(--hairline-width) solid var(--rule);
}
.work-card__notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.work-card__note-row {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.work-card__note-row .lbl {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-right: 8px;
  display: inline-block;
  min-width: 40px;
}


/* ==========================================================================
   ZONES INTERACTIVE (4 bàn pha chế, có câu hỏi gợi nhớ + palette + how-to)
   ========================================================================== */

.series-detail__section--zones {
  background: var(--paper);
}

.zone {
  margin: 56px 0 0;
  padding: 32px 28px 36px;
  background: var(--paper-cool);
  border: var(--hairline-width) solid var(--rule);
  border-radius: 8px;
}
@media (min-width: 768px) {
  .zone { padding: 40px 40px 44px; margin-top: 64px; }
}

.zone__head {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: var(--hairline-width) solid var(--rule);
}
.zone__code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent-1);
  margin: 0 0 12px;
}
.zone__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 6px;
}
.zone__title-en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: 0.01em;
}

.zone__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .zone__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

.zone__col-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: var(--hairline-width) solid var(--rule);
}

.zone__prompts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zone__prompts li {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 14px;
  padding-left: 18px;
  position: relative;
}
.zone__prompts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: var(--hairline-width);
  background: var(--accent-1);
}

/* Reuse .scent-list inside zone */
.zone .scent-list li {
  grid-template-columns: 48px 1fr 1fr;
  gap: 10px;
  padding: 8px 0;
}

.zone__how {
  margin-top: 20px;
  padding-top: 20px;
  border-top: var(--hairline-width) solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zone__how-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin: 0 0 6px;
}
.zone__how-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.zone__how-text.vi {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--ink);
}
.zone__how-text.en {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 13px;
}