/* demo54 "DUSK After Dark": a dark poster profile with a sideways issue track. */
.p-demo54 { --bg:#0a0908; --bone:#efe8dc; --dim:#a79f92; --red:#e8341f; --edge:clamp(16px,3vw,48px); background:var(--bg); }
.p-demo54 .main { padding:0; }
.p-demo54 .header { background:#0a0908; }
.p-demo54 .header::before { display:none; }
.du { color:var(--bone); font-family:Archivo,system-ui,sans-serif; overflow-x:clip; }
.du :where(*) { color:inherit; }
.du :where(h1,h2,p,figure) { margin:0; }
.du img { display:block; width:100%; height:100%; object-fit:cover; }
.du-hero { position:relative; height:calc(100svh - 70px); min-height:560px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--edge) 24px; }
.du-hero__img { position:absolute; inset:0; object-position:50% 22%; }
.du-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(#0a090800 45%,#0a0908e8); }
.du-word { position:relative; z-index:1; display:flex; justify-content:space-between; font:400 clamp(120px,31vw,600px)/.92 Anton,Impact,sans-serif; color:var(--bone)!important; text-shadow:0 2px 40px #0006; }
.du-word span { display:block; animation:du-rise 1.1s cubic-bezier(.2,.8,.2,1) both; }
.du-word span:nth-child(2){animation-delay:.08s}.du-word span:nth-child(3){animation-delay:.16s}.du-word span:nth-child(4){animation-delay:.24s}
@keyframes du-rise { from { transform:translateY(30%); opacity:0; } }
.du-hero__foot { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) auto; gap:20px; align-items:end; margin-top:14px; }
.du-about { font-size:clamp(19px,1.9vw,28px); line-height:1.2; font-weight:500; max-width:24em; }
.du-hand { font-size:14px; line-height:1.45; color:var(--bone); }
.du-btn { display:inline-flex; gap:10px; align-items:center; min-height:48px; padding:0 22px; background:var(--bone); color:#0a0908; border:0; font:700 14px Archivo,sans-serif; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; cursor:pointer; transition:background .2s,color .2s; }
.du-btn:hover,.du-btn[aria-pressed=true] { background:var(--red); color:#0a0908; }
.du-btn--red { background:var(--red); color:#0a0908; }
.du-btn--red:hover { background:var(--bone); }
.du-track { height:320vh; }
.du-pin { position:sticky; top:70px; height:calc(100vh - 70px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.du-rail { display:flex; align-items:flex-end; gap:clamp(14px,2vw,28px); padding:0 var(--edge); width:max-content; will-change:transform; }
.du-rail__h { font:400 clamp(70px,11vw,190px)/.92 Anton,sans-serif; text-transform:uppercase; margin-right:4vw!important; color:var(--red)!important; }
.du-bar { position:absolute; left:var(--edge); right:var(--edge); bottom:26px; height:2px; background:#efe8dc33; }
.du-bar i { display:block; height:100%; background:var(--red); transform:scaleX(0); transform-origin:left; }
.du-call { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:90vh; }
.du-call__pic { min-height:60vh; }
.du-call__t { background:var(--red); color:#0a0908; padding:clamp(24px,4vw,64px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:20px; }
.du-tag { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.du-call__t h2 { font:400 clamp(58px,8vw,140px)/.95 Anton,sans-serif; text-transform:uppercase; }
.du-call__t>p:not(.du-tag):not(.du-clock) { font-size:19px; line-height:1.4; max-width:30em; font-weight:500; }
.du-clock { display:flex; gap:clamp(18px,3vw,40px); }
.du-clock span { display:grid; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.du-clock b { font:400 clamp(44px,5vw,76px)/1 Anton,sans-serif; font-variant-numeric:tabular-nums; }
.du-call__t .du-btn { background:#0a0908; color:var(--bone); }
.du-call__t .du-btn:hover { background:var(--bone); color:#0a0908; }
.du-strip { padding:clamp(60px,8vw,120px) 0 0; }
.du-strip__h { padding:0 var(--edge) 18px; font:400 clamp(40px,5vw,84px)/1 Anton,sans-serif; text-transform:uppercase; }
.du-strip__g { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.du-strip figure { aspect-ratio:3/4; overflow:hidden; }
.du-strip img { filter:grayscale(1) contrast(1.08); transition:filter .4s,transform .8s; }
.du-strip figure:hover img { filter:none; transform:scale(1.04); }
.du-team { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,28px); padding:clamp(50px,7vw,100px) var(--edge); }
.du-team a { display:grid; grid-template-columns:72px 1fr; column-gap:14px; color:inherit; text-decoration:none; align-content:center; }
.du-team img { grid-row:span 2; width:72px; height:72px; }
.du-team span { align-self:end; color:var(--dim); font-size:14px; }
.du-team strong { font:400 clamp(20px,2.2vw,32px)/1.1 Anton,sans-serif; text-transform:uppercase; }
.du :focus-visible { outline:3px solid var(--bone); outline-offset:3px; }
@media (max-width:860px) {
  .du-hero__foot { grid-template-columns:1fr; }
  .du-track { height:auto; }
  .du-pin { position:static; height:auto; padding:50px 0; }
  .du-rail { width:auto; overflow-x:auto; scroll-snap-type:x mandatory; align-items:stretch; }
  .du-rail { transform:none!important; }
  .du-iss { flex:none; scroll-snap-align:center; }
  .du-rail__h { align-self:center; }
  .du-bar { display:none; }
  .du-call { grid-template-columns:1fr; }
  .du-strip__g { grid-template-columns:1fr 1fr; }
  .du-team { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .du-word span { animation:none; } }
.du-iss { flex:none; display:grid; grid-template-columns:auto 1fr auto; gap:0 12px; align-items:baseline; width:min(50vh,78vw); color:var(--bone); text-decoration:none; }
.du-iss img { grid-column:1/-1; aspect-ratio:4/5; height:auto; margin-bottom:10px; transition:opacity .3s; }
.du-iss:hover img { opacity:.82; }
.du-iss__n { font:400 24px/1 Anton,sans-serif; color:var(--red); }
.du-iss__t { font:400 24px/1 Anton,sans-serif; text-transform:uppercase; }
.du-iss__d { font-size:13px; color:var(--dim); }