@import url("/nghe-thuat0/cursor.css?v=2");

:root {
  --black:#050506;
  --charcoal:#101012;
  --paper:#e9e4d9;
  --bone:#d6d0c2;
  --blood:#9f1630;
  --red:#ec294b;
  --grey:#8b8586;
}

* { box-sizing:border-box; }
html { color-scheme:dark; scroll-behavior:smooth; }
body {
  min-height:100vh;
  margin:0;
  color:var(--paper);
  background:
    radial-gradient(circle at 78% 8%,rgba(145,14,38,.19),transparent 27rem),
    radial-gradient(circle at 9% 48%,rgba(255,255,255,.035),transparent 22rem),
    var(--black);
  font-family:"IBM Plex Mono",monospace;
  overflow-x:hidden;
}
body::before {
  content:"";
  position:fixed;
  z-index:50;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background:
    repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.045) 3px 4px),
    repeating-radial-gradient(circle at 20% 20%,transparent 0 2px,rgba(255,255,255,.04) 3px 4px);
  mix-blend-mode:screen;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; }
button { font:inherit; }

.dark-shell { width:min(1260px,calc(100% - 32px)); margin:0 auto; }
.warning-strip { display:flex; justify-content:space-between; gap:20px; min-height:28px; margin:8px 0; padding:7px 10px; overflow:hidden; color:#0a0809; border:1px solid var(--paper); background:var(--paper); font:800 8px/1.4 "IBM Plex Mono",monospace; letter-spacing:.12em; white-space:nowrap; }
.warning-strip span:first-child { overflow:hidden; text-overflow:ellipsis; }
.warning-strip b { color:var(--blood); animation:darkBlink 1s steps(2,end) infinite; }

.dark-header { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:64px; border:1px solid rgba(233,228,217,.25); background:rgba(8,8,9,.9); box-shadow:8px 8px 0 rgba(159,22,48,.23); }
.dark-brand { display:flex; align-items:center; align-self:stretch; gap:10px; padding:9px 14px; color:var(--black); background:var(--paper); }
.dark-brand__mark { display:grid; width:38px; height:38px; place-items:center; border:3px solid var(--black); border-radius:50%; font:900 22px/1 "UnifrakturCook",serif; }
.dark-brand strong { display:block; font:900 13px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; }
.dark-brand small { display:block; margin-top:5px; color:var(--blood); font:700 7px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; }
.dark-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; padding:9px 11px; }
.dark-nav a { padding:7px 9px; color:var(--grey); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.035); font:700 8px/1 "IBM Plex Mono",monospace; text-transform:uppercase; }
.dark-nav a:hover,.dark-nav a:focus-visible,.dark-nav a.active { color:var(--paper); border-color:var(--red); background:var(--blood); outline:0; }

.dark-hero { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr); gap:9px; min-height:670px; margin-top:10px; }
.dark-hero__main,.dark-hero__side { position:relative; overflow:hidden; border:1px solid rgba(233,228,217,.3); background:#09090a; }
.dark-hero__main > img { width:100%; height:100%; min-height:670px; object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.14) brightness(.64); }
.dark-hero__main::before { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(0deg,rgba(3,3,4,.98),transparent 62%),linear-gradient(90deg,rgba(4,4,5,.5),transparent 45%); }
.dark-hero__main::after { content:"DO NOT LOOK AWAY"; position:absolute; z-index:4; right:12px; top:18px; color:rgba(255,255,255,.62); font:700 7px/1 "IBM Plex Mono",monospace; letter-spacing:.18em; writing-mode:vertical-rl; }
.dark-title { position:absolute; z-index:4; left:clamp(18px,5vw,58px); right:18px; bottom:38px; }
.dark-title p { margin:0 0 11px; color:var(--red); font:800 9px/1 "IBM Plex Mono",monospace; letter-spacing:.17em; }
.dark-title h1 { margin:0; color:var(--paper); font:700 clamp(65px,10vw,142px)/.68 "UnifrakturCook",serif; letter-spacing:-.045em; text-shadow:-5px 0 rgba(159,22,48,.8),5px 0 rgba(255,255,255,.12),0 18px 40px #000; }
.dark-title h1 span { display:block; margin:27px 0 0 8px; color:var(--bone); font:800 clamp(11px,1.5vw,19px)/1.3 "IBM Plex Mono",monospace; letter-spacing:.12em; }

.dark-hero__side { display:flex; flex-direction:column; }
.dark-hero__side img { width:100%; min-height:420px; flex:1; object-fit:cover; filter:grayscale(.82) contrast(1.2) brightness(.64) saturate(.45); }
.dark-hero__side::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(5,5,6,.97) 0 16%,transparent 53%),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.05) 4px); }
.dark-hero__note { position:absolute; z-index:3; right:14px; bottom:16px; left:14px; padding:12px; color:#aaa4a4; border-left:4px solid var(--red); background:rgba(5,5,6,.78); font:600 9px/1.65 "IBM Plex Mono",monospace; }
.dark-hero__note b { display:block; margin-bottom:7px; color:var(--paper); font-size:10px; letter-spacing:.1em; }
.side-stamp { position:absolute; z-index:4; top:16px; right:15px; display:grid; width:83px; height:83px; place-items:center; color:var(--red); border:2px solid var(--red); border-radius:50%; font:900 9px/1.15 "IBM Plex Mono",monospace; text-align:center; transform:rotate(12deg); }

.dark-meta { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; margin:9px 0 35px; padding:10px 12px; color:var(--black); border:1px solid var(--paper); background:var(--paper); box-shadow:6px 6px 0 var(--blood); }
.dark-meta a { padding:7px 9px; color:var(--paper); background:var(--black); font:800 8px/1 "IBM Plex Mono",monospace; }
.dark-meta p { margin:0; overflow:hidden; font:800 8px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap; }
.dark-meta strong { color:var(--blood); font:900 9px/1 "IBM Plex Mono",monospace; }

.archive-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:17px; border-bottom:1px solid rgba(233,228,217,.25); }
.archive-head h2 { margin:0 0 -1px; padding:9px 14px; color:var(--paper); border-bottom:4px solid var(--red); font:700 clamp(31px,5vw,66px)/.78 "UnifrakturCook",serif; }
.archive-head p { margin:0 0 8px; color:var(--grey); font:700 8px/1.4 "IBM Plex Mono",monospace; letter-spacing:.12em; text-align:right; }

.dark-gallery { columns:3 270px; column-gap:12px; }
.dark-piece { position:relative; display:inline-block; width:100%; margin:0 0 12px; break-inside:avoid; overflow:hidden; border:1px solid rgba(233,228,217,.28); background:var(--charcoal); cursor:zoom-in; }
.dark-piece:nth-child(3n+2) { transform:rotate(.45deg); }
.dark-piece:nth-child(4n) { transform:rotate(-.35deg); }
.dark-piece::before { content:attr(data-no); position:absolute; z-index:3; top:8px; left:8px; min-width:30px; padding:5px; color:var(--paper); border:1px solid var(--paper); background:var(--blood); box-shadow:3px 3px 0 var(--black); font:900 8px/1 "IBM Plex Mono",monospace; text-align:center; }
.dark-piece img { display:block; width:100%; height:auto; filter:grayscale(.72) contrast(1.16) brightness(.75); transition:filter .22s ease,transform .22s ease; }
.dark-piece:hover img { filter:grayscale(.15) contrast(1.12) brightness(.9); transform:scale(1.018); }
.dark-piece figcaption { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; color:var(--paper); border-top:1px solid rgba(233,228,217,.2); font:800 9px/1.3 "IBM Plex Mono",monospace; }
.dark-piece figcaption small { color:var(--red); font-size:7px; letter-spacing:.08em; }

.dark-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:30px 0; padding:20px; color:var(--grey); border-top:1px solid rgba(233,228,217,.22); background:#080809; font:600 8px/1.6 "IBM Plex Mono",monospace; }
.dark-footer strong { color:var(--red); letter-spacing:.12em; }
.dark-footer a { color:var(--paper); }

.dark-lightbox { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:3vw; background:rgba(1,1,2,.96); cursor:zoom-out; }
.dark-lightbox img { max-width:92vw; max-height:90vh; border:1px solid var(--paper); box-shadow:13px 13px 0 var(--blood); }
.dark-lightbox span { position:absolute; top:16px; right:18px; color:var(--paper); font:800 9px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; }

@keyframes darkBlink { 50% { opacity:.2; } }

@media (max-width:840px) {
  .dark-header { align-items:stretch; flex-direction:column; gap:0; }
  .dark-nav { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; }
  .dark-nav a { flex:0 0 auto; }
  .dark-hero { grid-template-columns:1fr; }
  .dark-hero__main > img { min-height:560px; }
  .dark-hero__side { min-height:420px; }
  .dark-hero__side img { min-height:420px; }
  .dark-meta { grid-template-columns:1fr auto; }
  .dark-meta p { grid-column:1/-1; grid-row:2; }
}

@media (max-width:520px) {
  .dark-shell { width:calc(100% - 16px); }
  .dark-brand strong { font-size:11px; }
  .dark-hero__main > img { min-height:500px; object-position:52% center; }
  .dark-title { left:17px; bottom:24px; }
  .dark-title h1 { font-size:68px; }
  .dark-title h1 span { font-size:9px; }
  .archive-head { align-items:start; flex-direction:column; }
  .archive-head p { text-align:left; }
  .dark-gallery { columns:1; }
  .dark-piece:nth-child(n) { transform:none; }
  .dark-footer { align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}