/* demo60: deadline scrubber. Background: a sun sinking towards the horizon as the chosen date nears a deadline. */
.du2-top { padding-top:clamp(40px,7vw,100px); padding-bottom:clamp(40px,8vw,120px); }
.du2-top .hero__title { font-size:clamp(90px,16vw,240px); line-height:.9; margin-bottom:18px; }
.du2-time { scroll-margin-top:90px; }
.du2-track input { display:block; }
.du2-marks { position:relative; height:56px; margin:0 8px; border-top:1px solid var(--line-strong); }
.du2-mark { position:absolute; top:0; transform:translateX(-50%); padding-top:8px; font-size:12px; color:#dcdcdc; white-space:nowrap; text-align:center; }
.du2-mark::before { content:""; position:absolute; left:50%; top:-6px; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:#ff5a3a; box-shadow:0 0 12px #ff5a3a; }
.du2-mark.gone::before { background:#6d6d73; box-shadow:none; }
.du2-read { margin:0 0 14px; color:#dcdcdc; } .du2-read strong { font:600 22px var(--font-head); color:#fff; margin-right:8px; }
.du2-calls { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.du2-call { display:grid; grid-template-rows:150px auto; border-radius:var(--radius); overflow:hidden; background:rgb(0 0 0 / .35); border:1px solid var(--line); transition:opacity .3s; }
.du2-call img { width:100%; height:100%; object-fit:cover; }
.du2-call div { padding:10px 12px 12px; }
.du2-call strong { display:block; font:600 16px var(--font-head); color:#fff; }
.du2-call small { display:block; margin:2px 0 6px; font-size:13px; color:#cfcfcf; }
.du2-call.gone { opacity:.6; } .du2-call.gone img { filter:grayscale(1); }
@media (max-width:760px){ .du2-calls { grid-template-columns:1fr; } .du2-call { grid-template-rows:none; grid-template-columns:96px 1fr; } .du2-call img { height:112px; } }