/* Blockchain Gallery — giao diện.
   Bảng màu 2 nền + 1 màu nhấn, lấy từ chất liệu thật của phòng trưng bày:
   nền đêm (mở đầu, Phòng I, III, chân trang) · nền vữa tường (Phòng II, IV, nhãn tường) · nhấn thép corten (tương tác, nhãn phòng, nút).
   Thép là màu chữ; rỉ đồng chỉ còn làm nền khung ảnh chờ. */

@property --gap {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

:root {
  --night: #000000;
  --patina: #13201e;
  --patina-2: #1a2b28;
  --steel: #d2d6d5;
  --steel-2: #939c9a;
  --corten: #c8733f;
  --corten-deep: #9a4f26;
  --plaster: #e4e4df;
  --ink: #161816;

  /* Màu theo nền: phòng tối dùng mặc định; phòng sáng (.theme-light) đổi lại cả bộ.
     Nhấn trên nền sáng dùng corten đậm để đủ tương phản. */
  --bg: var(--night);
  --fg: var(--steel);
  --fg-2: var(--steel-2);
  --accent: var(--corten);
  --rule: rgba(210, 214, 213, 0.14);
  --line: rgba(210, 214, 213, 0.35); /* viền nút có khung */
  /* Ảnh người đơn sắc ấm (ngả tông vữa, corten): tác giả, người đưa tượng về, chân dung Phòng IV */
  --tone-warm: grayscale(1) sepia(0.28) brightness(1.06) contrast(1.04);

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

  /* Một họ chữ duy nhất: Cormorant Garamond, bốn biến thể:
     300 (chỉ tiêu đề từ 40px), 400, 400 nghiêng, 600 (nút, tên nghệ sĩ trên nhãn).
     Chữ thường của Cormorant thấp (khoảng 0,4 em) nên thân chữ đặt lớn hơn chữ không chân cùng vai.
     Mọi bậc co giãn liên tục theo bề rộng màn hình, từ 320px (số trái) đến 1440px (số phải):
     nhỏ 15–17 · vừa 17–20 · đoạn văn 18–21 · tiêu đề phụ 17–22 (nghiêng) · lời dẫn 19–28 · tên 20–26 ·
     tên lớn 24–40 · tiêu đề phòng 32–84 · tiêu đề trang 44–132.
     Cỡ trên điện thoại bám thang chữ của Apple HIG (Body 17, Footnote 13, Title 20–28, Large Title 34)
     và Material 3 (Body 16, Label 12–14, Headline 24–32), nhích nhẹ vì chữ thường của Cormorant thấp. */
  --fs-s: clamp(15px, 14.43px + 0.179vw, 17px);
  --fs-m: clamp(17px, 16.14px + 0.268vw, 20px);
  --fs-prose: clamp(18px, 17.14px + 0.268vw, 21px);
  --fs-kicker: clamp(17px, 15.57px + 0.446vw, 22px);
  --fs-lead: clamp(19px, 16.43px + 0.804vw, 28px);
  --fs-name: clamp(20px, 18.29px + 0.536vw, 26px);
  --fs-name-l: clamp(24px, 19.43px + 1.429vw, 40px);
  --fs-title: clamp(32px, 17.14px + 4.643vw, 84px);
  --fs-hero: clamp(44px, 18.86px + 7.857vw, 148px);

  /* Giãn dòng: Cormorant có chữ thường thấp, nét lên/xuống dài nên giữa các dòng vốn đã thoáng;
     dùng 1,35–1,5 cho chữ nhiều dòng (không thấp hơn 1,35 để dấu tiếng Việt chồng như Ở, ế không chạm dòng trên). */
  --lh-title: 1.08;  /* tiêu đề phòng, có thể xuống hai dòng */
  --lh-name: 1.12;   /* tên người, tên thành phố */
  --lh-lead: 1.35;   /* lời dẫn 22–28px */
  --lh-small: 1.4;   /* nhãn, vai trò, ghi chú */
  --lh-body: 1.45;   /* chữ thường */
  --lh-prose: 1.5;   /* đoạn văn đọc dài */

  /* Khoảng cách: bội số 8px, theo chiều rộng màn hình (không theo chiều cao) để mọi thiết bị cùng nhịp.
     Khối phụ trong một phòng luôn cách nhau ít hơn hai phòng với nhau (2 × --section-y). */
  --space-xs: 8px;    /* nhãn phòng → tiêu đề */
  --space-s: 16px;
  --space-m: 24px;    /* tiêu đề → lời dẫn */
  --space-ml: 32px;   /* ảnh ↔ chữ khi xếp một cột */
  --space-l: 48px;    /* lời dẫn → nội dung; giữa các khối phụ */
  --section-y: clamp(56px, 6vw, 88px); /* đệm trên/dưới mỗi phòng; giữa các tác phẩm */

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --slice: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--fg);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-m);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
p { margin: 0 0 1em; }
/* Đoạn cuối của một khối không thêm lề dưới, để khoảng giữa các phòng chỉ do --section-y quyết định */
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--corten); color: var(--night); padding: 8px 14px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Thanh trên ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  padding: 18px var(--gutter);
  /* Kính mờ trong suốt; đổi tông theo phòng bên dưới (main.js thêm .on-light khi đi qua phòng nền sáng) */
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid rgba(210, 214, 213, 0.1);
  transition: background-color 0.3s, border-color 0.3s;
}
.bar.on-light {
  --fg: var(--ink); --fg-2: rgba(22, 24, 22, 0.68); --accent: var(--corten-deep);
  background: rgba(228, 228, 223, 0.72); border-bottom-color: rgba(22, 24, 22, 0.12);
}
.bar.on-light .lang, .bar.on-light .lang a + a, .bar.on-light .bar-menu:not([hidden]) { border-color: rgba(22, 24, 22, 0.3); }
.bar.on-light .lang a[aria-current] { background: rgba(22, 24, 22, 0.08); }
.mark {
  font-family: var(--serif); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; color: var(--fg); margin-right: auto;
}
.bar.is-scrolled { background: rgba(0, 0, 0, 0.55); }
.bar.on-light.is-scrolled { background: rgba(228, 228, 223, 0.8); }
.bar-nav { display: flex; gap: 24px; font-size: var(--fs-s); }
.bar-nav a { text-decoration: none; color: var(--fg-2); }
.bar-menu { display: none; }

/* Nút gạt ngôn ngữ: cùng kiểu viền với nút "Các phòng"; ô đang xem có nền */
.lang { display: inline-flex; flex: none; border: 1px solid rgba(210, 214, 213, 0.4); font-size: var(--fs-s); line-height: 1; }
.lang a { padding: 7px 10px; text-decoration: none; color: var(--fg-2); letter-spacing: 0.06em; }
.lang a + a { border-left: 1px solid rgba(210, 214, 213, 0.4); }
.lang a[aria-current] { background: rgba(210, 214, 213, 0.14); color: var(--fg); }
.lang.bar-nav-lang { display: none; }

/* Điện thoại và máy tính bảng: các phòng gom vào một menu mở bằng nút, không có chuyển động. */
@media (max-width: 900px) {
  /* Thanh mỏng khoảng 48px; nút "Các phòng" gọn 32px nhưng vùng chạm vẫn 44px nhờ ::after */
  .bar { gap: 16px; padding-block: 8px; }
  .bar-nav { display: none; }
  .bar-menu:not([hidden]) {
    display: block; position: relative;
    background: transparent; color: var(--fg); border: 1px solid rgba(210, 214, 213, 0.4);
    font: inherit; font-size: var(--fs-s); line-height: 1; padding: 7px 12px; cursor: pointer;
  }
  .bar-menu::after { content: ''; position: absolute; inset: -7px -4px; }
  .bar.is-open { background: rgba(0, 0, 0, 0.94); }
  .bar.on-light.is-open, .bar.on-light.is-open .bar-nav { background: rgba(228, 228, 223, 0.97); }
  .bar.is-open .bar-nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100svh - 100%); overflow-y: auto;
    padding: 4px var(--gutter) 20px;
    background: rgba(0, 0, 0, 0.94); border-bottom: 1px solid rgba(210, 214, 213, 0.12);
    font-size: var(--fs-m);
  }
  .bar.is-open .bar-nav > a { padding: 12px 0; color: var(--fg); border-top: 1px solid rgba(210, 214, 213, 0.1); }
  .bar.is-open .bar-nav .lang { align-self: flex-start; margin-top: 16px; }
}
/* Màn hẹp: nút ngôn ngữ chuyển vào trong menu cho thanh trên đủ chỗ (chỉ khi menu dùng được). */
@media (max-width: 480px) {
  .has-menu .bar-lang { display: none; }
  .has-menu .bar-nav-lang { display: inline-flex; }
  .mark, .bar-menu { white-space: nowrap; }
}
@media (max-width: 360px) {
  .bar-menu:not([hidden]) { padding: 6px 10px; }
}

/* ---------- Hiệu ứng lát thép: chi tiết đặc trưng của trang ----------
   Phần tử .slices bị cắt thành các lát ngang như bức tượng. --gap là khe giữa các lát:
   0 = liền khối, càng lớn thì hình càng "tan biến". */
.slices {
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0, #000 calc(var(--slice) - var(--gap)), transparent calc(var(--slice) - var(--gap)), transparent var(--slice));
          mask-image: repeating-linear-gradient(to bottom, #000 0, #000 calc(var(--slice) - var(--gap)), transparent calc(var(--slice) - var(--gap)), transparent var(--slice));
}
.is-assembling .slices { --gap: 6px; }
.is-assembled .slices { transition: --gap 1.8s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---------- Mở đầu ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: end;
  background: var(--night);
  overflow: hidden;
}
/* Ảnh bắt đầu từ 24% bề rộng, căn mép trái ảnh, để tượng giữ chỗ cũ mà nửa trái tối dần thay vì đen trơn */
.hero-image { position: absolute; inset: 0 0 0 24%; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 40%; filter: grayscale(0.25) contrast(1.05); }
.hero-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--night) 0%, rgba(0, 0, 0, 0.78) 16%, rgba(0, 0, 0, 0.4) 38%, rgba(0, 0, 0, 0) 62%), linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 40%);
}
.hero-copy {
  position: relative; z-index: 2;
  padding: 0 var(--gutter) clamp(72px, 12vh, 140px);
  grid-column: 1 / -1;
}
.hero-copy > *:not(.hero-title) { max-width: 720px; }
.hero-title {
  --slice: 0.11em;
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-hero); line-height: 0.92; letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 0.35em;
}
@media (min-width: 901px) { .hero-title { white-space: nowrap; } }
.hero-lead { font-family: var(--serif); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 400; max-width: 48ch; color: var(--fg); }
.hero-place { color: var(--fg-2); font-size: var(--fs-m); margin-bottom: var(--space-ml); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-s); }

@media (max-width: 900px) {
  .hero { display: block; min-height: 0; padding-top: 0; }
  /* Ảnh tượng không cao quá 110% bề rộng để ảnh ngang 3:2 không bị cắt quá nửa trên điện thoại */
  .hero-image { position: relative; inset: auto; height: min(72svh, 110vw); }
  .hero-img { object-position: 35% 40%; }
  .hero-image::after { background: linear-gradient(to top, var(--night) 4%, rgba(0, 0, 0, 0) 45%); }
  .hero-copy { margin-top: calc(-1 * min(22svh, 30vw)); padding-bottom: var(--section-y); }
}

.btn {
  display: inline-block;
  background: var(--corten); color: var(--night);
  font-size: var(--fs-m); font-weight: 600; text-decoration: none;
  padding: 14px 26px; border-radius: 2px;
}

/* Ô giờ mở cửa: đi cặp với nút đăng ký, cùng chiều cao; viền mảnh như các nút viền khác.
   Trong giờ mở cửa (main.js thêm .is-open) viền và đồng hồ chuyển sang màu nhấn. */
.status {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 13px 18px; border: 1px solid rgba(210, 214, 213, 0.35); /* 13 + viền 1 = lề 14 của nút: cùng chiều cao cả khi xuống dòng */
  background: rgba(0, 0, 0, 0.35);
  font-size: var(--fs-m); line-height: var(--lh-body); color: var(--fg); /* cùng cỡ chữ với nút đăng ký */
}
/* Giờ, năm, kích thước, số thứ tự: chữ số đứng (cao bằng chữ hoa) thay cho chữ số kiểu cổ của Cormorant,
   vốn thấp bằng chữ thường nên trông nhỏ; đoạn văn vẫn giữ chữ số kiểu cổ. */
.status, .visit-facts dd, .stop-year, .label-meta, .portrait-num { font-variant-numeric: lining-nums; }
.time { white-space: nowrap; font-weight: 600; font-size: 1.12em; line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.01em; }
.status-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--fg-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.status.is-open { border-color: var(--accent); }
.status.is-open .status-icon { stroke: var(--accent); }

/* ---------- Các phòng ---------- */
.room {
  /* Nền tràn hết chiều ngang; nội dung nằm trong khung --max, thẳng mép trái với mọi phòng */
  padding: var(--section-y) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  background: var(--bg); color: var(--fg);
}
.room-no {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--fs-kicker);
  color: var(--accent); margin-bottom: var(--space-xs);
}
.room-title {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.015em;
  color: var(--fg); margin-bottom: var(--space-m); max-width: 14em;
}
.room-lead { font-family: var(--serif); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 72ch; color: var(--fg-2); margin-bottom: var(--space-l); }
.prose { max-width: 62ch; }
.prose p { font-size: var(--fs-prose); line-height: var(--lh-prose); }

/* Nhãn tường: như nhãn tác phẩm treo cạnh tranh ở bảo tàng */
.label { font-size: var(--fs-s); line-height: var(--lh-small); }
.label p { margin: 0; }
.label-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--fs-kicker); line-height: var(--lh-name); }
.label-artist { font-weight: 600; margin-top: 2px !important; }
.label-meta { color: inherit; opacity: 0.75; margin-top: 8px !important; }
.label-note { margin-top: 12px !important; }
.label-wall {
  background: var(--plaster); color: var(--ink);
  padding: 22px 24px; max-width: 280px; align-self: start;
}

/* Phòng I nói tiếp ảnh tượng ở phần mở đầu, nên đệm trên ngắn hơn các phòng khác.
   Một lưới cho cả phòng: cột đọc bên trái (tiêu đề, lời kể về tượng, tác giả), cột hiện vật bên phải
   (nhãn tường, chân dung tác giả ngay dưới, cùng bề rộng, cùng mép phải với ảnh tượng phía trên). */
.room-statue { padding-top: var(--space-l); }
.exhibit, .initiator {
  /* Cột hiện vật dùng chung cho mọi phòng: nhãn tường và ảnh người cùng bề rộng, cùng mép phải */
  --object: clamp(280px, 24vw, 340px);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--object); column-gap: clamp(32px, 6vw, 96px); align-items: start;
}
.exhibit {
  /* Nhãn tường bắt đầu ngang dòng tiêu đề phòng (dòng "Phòng I" nằm riêng phía trên) */
  grid-template-areas: 'no .' 'head label' 'text label' 'artist portrait';
}
.exhibit > .room-no { grid-area: no; }
.exhibit > .room-title { grid-area: head; }
.exhibit .label-wall { grid-area: label; max-width: none; }
.exhibit-text { grid-area: text; margin-top: var(--space-m); }
.exhibit .artist-frame { grid-area: portrait; margin-top: var(--space-l); }
.artist-text { grid-area: artist; margin-top: var(--space-l); }
@media (max-width: 900px) {
  .exhibit { grid-template-columns: 1fr; grid-template-areas: 'no' 'head' 'label' 'text' 'portrait' 'artist'; }
  .exhibit-text { margin-top: var(--space-ml); }
  .exhibit .artist-frame { max-width: clamp(240px, 72vw, 360px); }
  .artist-text { margin-top: var(--space-m); }
}

/* Người đưa tượng về (Phòng II): cùng lưới với Phòng I, chữ ở cột đọc, ảnh ở cột hiện vật, đỉnh ngang nhau */
.initiator { grid-template-areas: 'text portrait'; margin-top: var(--section-y); }
.initiator-frame { grid-area: portrait; }
.initiator-text { grid-area: text; }
/* Mọi khung ảnh người cùng tỉ lệ 3:4, đơn sắc ấm */
.artist-frame, .initiator-frame { aspect-ratio: 3 / 4; overflow: hidden; background: var(--patina); width: 100%; }
.artist-img, .initiator-img { width: 100%; height: 100%; object-fit: cover; filter: var(--tone-warm); }
.person-heading { font-family: var(--serif); font-style: italic; font-size: var(--fs-kicker); color: var(--accent); margin-bottom: var(--space-xs); }
/* Khối người là khối phụ trong phòng: tên nhỏ hơn tiêu đề phòng một bậc */
.person-name { font-family: var(--serif); font-weight: 400; font-size: var(--fs-name); line-height: var(--lh-name); color: var(--fg); margin-bottom: var(--space-s); }
.initiator .person-name { margin-bottom: 4px; }
.initiator-role { font-size: var(--fs-s); color: var(--fg-2); margin-bottom: 18px; max-width: 48ch; }
@media (max-width: 900px) {
  .initiator { grid-template-columns: 1fr; grid-template-areas: 'portrait' 'text'; row-gap: var(--space-m); }
  .initiator-frame { max-width: clamp(240px, 72vw, 360px); }
}

/* Phòng sáng: nền vữa tường, chữ mực; nhãn tường đảo sang nền đêm */
.theme-light {
  --bg: var(--plaster); --fg: var(--ink); --fg-2: rgba(22, 24, 22, 0.68);
  --accent: var(--corten-deep); --rule: rgba(22, 24, 22, 0.2); --line: rgba(22, 24, 22, 0.3);
}
.theme-light .label-wall {
  --fg: var(--steel); --fg-2: var(--steel-2); --accent: var(--corten);
  background: var(--night); color: var(--fg);
}
.plate, .work-frame::after { --fg: var(--steel); --fg-2: var(--steel-2); }

/* Khung chờ ảnh */
.plate {
  width: 100%; height: 100%; min-height: 160px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 20px;
  background:
    repeating-linear-gradient(to bottom, rgba(210, 214, 213, 0.07) 0 1px, transparent 1px var(--slice)),
    var(--patina-2);
}
.plate-name { font-family: var(--serif); font-weight: 400; font-size: var(--fs-name); line-height: var(--lh-name); color: var(--fg); }
.plate-note { font-size: var(--fs-s); color: var(--fg-2); }

/* Hành trình */
.journey {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--rule);
}
.stop { position: relative; padding: 32px 24px 0 0; }
.stop::before {
  content: ''; position: absolute; top: -5px; left: 0;
  width: 9px; height: 9px; border-radius: 50%; background: var(--fg-2);
}
.stop-here::before { background: var(--corten); box-shadow: 0 0 0 6px rgba(200, 115, 63, 0.2); }
.stop-year { font-family: var(--serif); font-weight: 400; font-size: var(--fs-kicker); color: var(--fg-2); }
.stop-city { font-family: var(--serif); font-size: var(--fs-name-l); line-height: var(--lh-name); color: var(--fg); margin-top: 6px; }
.stop-here .stop-city { color: var(--accent); }
.stop-country { font-size: var(--fs-s); color: var(--fg-2); margin-bottom: 14px; }
.stop-text { font-size: var(--fs-m); line-height: var(--lh-body); }
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--rule); }
  .stop { padding: 0 0 40px 28px; }
  .stop::before { top: 8px; left: -5px; }
}

/* Tác phẩm */
.works { display: grid; gap: var(--section-y); }
/* Ba tác phẩm cùng một khung 3:2, cùng kích thước. Tranh không đúng tỉ lệ (Khu 08, 120 × 100 cm) được cắt
   về khung, vùng cắt chọn theo bố cục tranh; "Xem lớn" luôn hiện toàn bộ tranh không cắt. Nhãn tường sát cạnh tranh. */
.work { margin: 0; display: grid; grid-template-columns: auto minmax(220px, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.work:nth-child(even) { grid-template-columns: minmax(220px, 1fr) auto; }
.work:nth-child(even) .label { justify-self: end; }
.work:nth-child(even) .work-frame { order: 2; }
.work-frame {
  all: unset; display: block; cursor: zoom-in; position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.work-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.work-img { height: clamp(300px, 36vw, 520px); width: auto; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
#work-mystery .work-img { object-position: 50% 28%; } /* giữ trọn mũ trùm, hai bàn tay và luồng sáng */
.work .label { background: var(--plaster); color: var(--ink); padding: 20px 22px; max-width: 300px; }
@media (max-width: 900px) {
  .work, .work:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-ml); }
  .work:nth-child(even) .label { justify-self: start; }
  /* Một cột: khung 3:2 phủ hết bề rộng */
  .work-img { height: calc((100vw - 2 * var(--gutter)) * 2 / 3); width: auto; max-width: 100%; }
  .work:nth-child(even) .work-frame { order: 0; }
}
/* Điện thoại: tiêu đề dưới 40px dùng độ đậm 400 (300 quá mảnh ở cỡ nhỏ) */
@media (max-width: 600px) {
  .room-title, .visit-title { font-weight: 400; }
}
/* Điện thoại: nhãn tác phẩm thành chú thích chữ ngay dưới tranh (không hộp), cho tranh là trọng tâm */
@media (max-width: 600px) {
  .work .label {
    --fg: inherit; --fg-2: inherit; --accent: inherit;
    background: none; color: var(--fg); max-width: none;
    padding: 2px 0 2px var(--space-s); border-left: 1px solid var(--rule);
  }
  .work .label-note { margin-top: var(--space-xs) !important; }
}

/* Chân dung */
.portraits-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-m); margin-bottom: var(--space-l); }
.portraits-head .room-lead { margin-bottom: 0; }

/* Chân dung cuộn ngang: 4 người trên máy tính, 3 trên máy tính bảng, 1 người mỗi lượt vuốt trên điện thoại (hé người tiếp theo).
   Cuộn gốc của trình duyệt + scroll-snap: vuốt trên cảm ứng, nút mũi tên khi dùng chuột, phím mũi tên khi chọn. */
.portraits {
  --cols: 4;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; gap: var(--space-m);
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--space-m)) / var(--cols));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.portraits::-webkit-scrollbar { display: none; }
.portraits > li { scroll-snap-align: start; }
.portraits:focus-visible { outline-offset: 6px; }
@media (max-width: 900px) { .portraits { --cols: 3; } }
/* Điện thoại: một chân dung lớn mỗi lượt vuốt, hé người kế tiếp */
@media (max-width: 600px) {
  .portraits { --cols: 1.3; gap: var(--space-s); }
  .portraits > li { scroll-snap-stop: always; }
}

.carousel-nav { display: flex; gap: var(--space-xs); }
.carousel-nav[hidden] { display: none; }
.carousel-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: transparent; color: var(--fg); border: 1px solid var(--line);
}
.carousel-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }
/* Chỉ hiện nút khi dùng chuột; màn cảm ứng vuốt ngang */
@media (hover: none), (pointer: coarse) { .carousel-nav { display: none; } }
/* Chân dung: đơn sắc ấm như ảnh in lưu trữ (ngả về tông vữa, corten) để 19 ảnh từ nhiều nguồn đồng nhất;
   rê chuột hoặc chạm thì hiện màu gốc. */
.portrait-img { width: 100%; height: 100%; object-fit: cover; filter: var(--tone-warm); }
.portrait-frame { aspect-ratio: 3 / 4; overflow: hidden; background: var(--patina); margin-bottom: var(--space-s); }
.portrait-num { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--fs-kicker); color: var(--accent); margin: 0; }
.portrait-name { font-family: var(--serif); font-size: var(--fs-name); line-height: var(--lh-name); color: var(--fg); margin: 2px 0 6px; }
.portrait-role { font-size: var(--fs-s); line-height: var(--lh-small); color: var(--fg-2); margin: 0; }

/* Chân trang = khu tham quan, nền đêm (so le sau Phòng IV nền vữa).
   Trái: lời mời và nút đăng ký. Phải: giờ mở cửa, địa chỉ, liên hệ. Dưới cùng: dòng ký tên.
   Mép trái thẳng với nội dung các phòng. */
.foot {
  background: var(--bg); color: var(--fg);
  padding: var(--section-y) var(--gutter) var(--space-ml);
}
.foot-inner {
  max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-l) clamp(40px, 6vw, 96px);
  align-items: start;
}
.foot-sign p { margin: 0; }
.visit-intro { container-type: inline-size; }
/* Tiêu đề khu tham quan co theo bề rộng cột chứa nó (cqi) để luôn nằm trên một dòng */
.visit-title { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 9cqi, 60px); line-height: var(--lh-title); letter-spacing: -0.01em; margin-bottom: var(--space-m); }
.visit-lead { font-family: var(--serif); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 46ch; margin-bottom: var(--space-ml); }
.visit-facts { margin: 0; padding-top: 8px; }
.visit-facts div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px var(--space-s); align-items: start; padding: 18px 0; border-top: 1px solid var(--rule); }
.visit-facts div:last-child { border-bottom: 1px solid var(--rule); }
.visit-facts dt { color: var(--accent); padding-top: 0.15em; }
.fact-icon { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.visit-facts dd { margin: 0; line-height: var(--lh-body); }
.visit-facts a { text-decoration-color: var(--accent); }
.foot-sign {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px;
  padding-top: var(--space-m); border-top: 1px solid var(--rule);
  font-size: var(--fs-s); color: var(--fg-2);
}
.foot-mark { font-weight: 600; font-size: var(--fs-kicker); color: var(--fg); }
/* Dòng bản quyền: hàng riêng dưới cùng */
.foot-copy { order: 3; flex-basis: 100%; font-size: var(--fs-s); }
/* Lên đầu trang: nút mũi tên, cùng kiểu viền với nút "Các phòng" và nút gạt ngôn ngữ */
.foot-top {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; align-self: center; margin-left: auto;
  border: 1px solid var(--line); color: var(--fg); text-decoration: none;
}
.foot-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .foot-inner { grid-template-columns: 1fr; }
}

/* Xem lớn tác phẩm */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; color: var(--fg);
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }
.lightbox-img { max-width: 94vw; max-height: 82vh; width: auto; height: auto; margin: 0 auto; }
.lightbox-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--fs-kicker); text-align: center; margin: 14px 0 0; }
.lightbox form { text-align: right; margin-bottom: 10px; }
.lightbox-close {
  background: transparent; color: var(--fg); border: 1px solid rgba(210, 214, 213, 0.4);
  font: inherit; font-size: var(--fs-s); padding: 8px 16px; cursor: pointer;
}

/* ---------- Hiện dần khi cuộn ----------
   Mỗi khối nội dung mờ dần hiện ra và dịch lên một chút khi cuộn tới, chỉ một lần; các mục cùng hàng lệch nhau
   80ms. Lớp .reveal do main.js thêm, nên không có JS hoặc khi giảm chuyển động thì nội dung hiện bình thường. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Tương tác ----------
   Chỉ những gì bấm được mới phản hồi; phản hồi là đổi trạng thái (màu, gạch chân, viền), không di chuyển.
   Corten là màu của tương tác, giống viền focus. Hover chỉ áp cho thiết bị có chuột để màn cảm ứng
   không bị "dính" trạng thái; cảm ứng nhận phản hồi khi nhấn (:active) và có vùng chạm tối thiểu 44px. */
a, button { -webkit-tap-highlight-color: transparent; }
a, .btn, .bar-menu, .lang, .lightbox-close, .work-img, .work-frame::after, .portrait-img, .initiator-img, .artist-img, .carousel-btn {
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, text-decoration-color 0.15s, filter 0.15s, opacity 0.15s;
}

/* Liên kết chữ: gạch chân corten hiện ra (điều hướng, chân trang), hoặc chữ sáng lên */
.bar-nav > a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: transparent;
}
.btn:active { background: var(--corten-deep); color: #fff; }
.bar-menu:active, .lightbox-close:active, .lang a:active, .foot-top:active, .carousel-btn:active { background: rgba(210, 214, 213, 0.12); }
.bar-menu[aria-expanded='true'] { border-color: var(--fg); }
a:active { color: var(--accent); }

/* Tác phẩm: khung mở xem lớn; nhãn "Xem lớn" (chữ có sẵn) hiện khi rê chuột hoặc chọn bằng bàn phím */
.work-frame::after {
  content: attr(data-hint);
  position: absolute; right: 12px; bottom: 12px;
  font-size: var(--fs-s); line-height: 1; color: var(--fg);
  background: rgba(0, 0, 0, 0.72); padding: 8px 12px;
  opacity: 0;
}
.work-frame:focus-visible::after { opacity: 1; }
.work-frame:active .work-img { filter: brightness(0.9); }

@media (hover: hover) and (pointer: fine) {
  a:hover { color: #fff; }
  .theme-light a:hover { color: var(--fg); }
  .bar-nav > a:hover {
    color: var(--fg); text-decoration-color: var(--corten);
  }
  .foot-top:hover { color: var(--accent); border-color: var(--fg); }
  .bar.is-open .bar-nav > a:hover { color: #fff; }
  .lang a:not([aria-current]):hover { color: var(--fg); background: rgba(210, 214, 213, 0.06); }
  .lang:hover { border-color: var(--fg); }
  .btn:hover { background: #dc8a55; color: var(--night); }
  .visit-facts a:hover { color: var(--accent); }
  .bar-menu:hover, .lightbox-close:hover, .carousel-btn:not(:disabled):hover { border-color: var(--fg); }
  .work-frame:hover .work-img { filter: brightness(1.06); }
  .work-frame:hover::after { opacity: 1; }
  .portrait:hover .portrait-img, .initiator-frame:hover .initiator-img, .artist-frame:hover .artist-img { filter: none; }
}

/* Chạm vào chân dung (cảm ứng) cũng hiện màu gốc */
.portrait:active .portrait-img, .initiator-frame:active .initiator-img, .artist-frame:active .artist-img { filter: none; }

/* Màn cảm ứng: nhãn "Xem lớn" luôn hiện để biết tác phẩm chạm được; vùng chạm đủ lớn */
@media (hover: none), (pointer: coarse) {
  .work-frame::after { opacity: 1; }
  .visit-facts a { display: inline-block; padding: 12px 0; }
  .lang a { padding: 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-assembled .slices { transition: none; }
  a, .btn, .bar-menu, .lightbox-close, .work-img, .work-frame::after, .portrait-img, .initiator-img, .artist-img, .bar { transition: none; }
}