/* THE LANYARD WALL (Digilu component). Reads the site's tokens: --bg --bg2 --bg3 --ink --soft --muted
 * --line --gold --gold-hi --on-gold --disp --text. Every color comes from them, so it follows the
 * site's color schemes. */
.lw{position:relative;overflow:hidden;padding-bottom:28px}
.lw-top{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:flex-end;justify-content:space-between}
.lw-intro{max-width:620px}
.lw-intro h2{margin-bottom:.4em}
.lw-tools{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.lw-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.lw-chip{font-family:var(--disp);font-weight:700;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);
  background:transparent;border:1px solid var(--line2,var(--line));border-radius:999px;padding:7px 14px 6px;cursor:pointer;display:inline-flex;gap:8px;align-items:baseline;transition:border-color .15s,color .15s,background .15s}
.lw-chip span{font-family:var(--text);font-size:.72rem;letter-spacing:0;color:var(--muted)}
.lw-chip:hover{border-color:var(--gold);color:var(--ink)}
.lw-chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.lw-chip[aria-pressed="true"] span{color:var(--on-gold);opacity:.75}
.lw-arrows{display:flex;gap:8px}
.lw-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2,var(--line));background:transparent;color:var(--ink);font-size:1.15rem;cursor:pointer;transition:border-color .15s,color .15s}
.lw-arrow:hover{border-color:var(--gold);color:var(--gold-hi)}
.lw-chip:focus-visible,.lw-arrow:focus-visible,.lw-badge:focus-visible,.lw-rail:focus-visible,.lw-nav:focus-visible,.lw-close:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* the bar every lanyard hangs from */
.lw-rail-wrap{position:relative;margin-top:34px}
.lw-bar{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold-lo,var(--gold)) 8%,var(--gold) 50%,var(--gold-lo,var(--gold)) 92%,transparent);opacity:.85}
.lw-rail{list-style:none;margin:0;padding:0 max(24px,calc((100vw - 1180px)/2)) 30px;display:flex;gap:26px;overflow-x:auto;overflow-y:visible;
  scroll-snap-type:x mandatory;scroll-padding-inline:max(24px,calc((100vw - 1180px)/2));scrollbar-width:thin;scrollbar-color:var(--gold-lo,var(--gold)) transparent;overscroll-behavior-x:contain}
.lw-item{flex:0 0 238px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:lw-sway var(--sw-dur,7s) ease-in-out infinite;animation-delay:var(--sw-delay,calc(var(--i) * -.83s))}
.lw-item[hidden]{display:none}
@keyframes lw-sway{0%,100%{transform:rotate(calc(var(--sw-amp,1.1deg) * -1))}50%{transform:rotate(var(--sw-amp,1.1deg))}}
/* A badge that just arrived swings harder, then settles into its own sway (2026-10-15). */
.lw-item.lw-kick{animation:lw-kick 1.6s cubic-bezier(.3,.7,.3,1) 1}
@keyframes lw-kick{0%{transform:rotate(7deg)}30%{transform:rotate(-4.5deg)}55%{transform:rotate(2.4deg)}78%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
.lw-item:hover,.lw-item:focus-within{animation-play-state:paused}
/* two ribbons meeting at a clip */
.lw-strap{position:relative;width:46px;height:74px;flex:none}
.lw-strap::before,.lw-strap::after{content:"";position:absolute;top:0;width:9px;height:66px;background:repeating-linear-gradient(180deg,var(--gold) 0 10px,var(--gold-hi) 10px 12px);border-radius:1px}
.lw-strap::before{left:6px;transform:skewX(10deg)}.lw-strap::after{right:6px;transform:skewX(-10deg)}
.lw-badge{position:relative;display:flex;flex-direction:column;width:238px;margin-top:-8px;padding:0;text-align:left;cursor:zoom-in;font:inherit;color:inherit;
  background:var(--bg3);border:1px solid var(--line2,var(--line));border-radius:10px;overflow:hidden;
  box-shadow:0 22px 40px rgba(0,0,0,.42),0 2px 0 rgba(255,255,255,.04) inset;transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.lw-badge::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 35%);pointer-events:none;z-index:2}
.lw-item:hover .lw-badge,.lw-badge:focus-visible{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 30px 54px rgba(0,0,0,.55)}
.lw-slot{position:absolute;top:9px;left:50%;width:42px;height:9px;margin-left:-21px;border-radius:5px;background:var(--bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.6);z-index:3}
/* the clip */
.lw-strap + .lw-badge::after{content:"";position:absolute;top:-2px;left:50%;width:30px;height:16px;margin-left:-15px;border:3px solid var(--soft);border-bottom:0;border-radius:8px 8px 0 0;opacity:.8;z-index:4}
.lw-head{display:block;padding:26px 14px 9px;font-family:var(--disp);font-weight:800;font-size:.95rem;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;line-height:1.05;
  color:var(--ink);background:var(--bg2);border-bottom:1px solid var(--line)}
.lw-badge--awards .lw-head{background:var(--gold);color:var(--on-gold);border-bottom-color:var(--gold)}
.lw-photo{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg)}
.lw-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03);transition:transform .5s ease,filter .3s}
.lw-item:hover .lw-photo img{transform:scale(1.04);filter:none}
.lw-name{display:block;padding:12px 14px 2px;font-family:var(--disp);font-weight:800;font-size:1.9rem;letter-spacing:.04em;line-height:.95;color:var(--ink);text-transform:uppercase}
.lw-cap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;padding:4px 14px 0;font-family:var(--text);font-size:.84rem;line-height:1.35;color:var(--soft)}
.lw-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 13px;margin-top:auto;font-family:var(--disp);font-size:.8rem;letter-spacing:.14em;color:var(--muted)}
.lw-code{flex:1;max-width:110px;height:18px;opacity:.75;background:repeating-linear-gradient(90deg,var(--gold) 0 2px,transparent 2px 4px,var(--gold) 4px 5px,transparent 5px 8px,var(--gold) 8px 11px,transparent 11px 13px)}
.lw-note{margin-top:4px;font-size:.78rem;color:var(--muted)}

/* viewer */
.lw-dialog{padding:0;border:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh;color:var(--ink)}
.lw-dialog::backdrop{background:rgba(5,5,7,.88);backdrop-filter:blur(3px)}
.lw-dlg-in{position:relative;background:var(--bg2);border:1px solid var(--gold);border-radius:10px;padding:14px}
.lw-dialog figure{margin:0}
.lw-dialog img{display:block;max-width:100%;max-height:74vh;width:auto;height:auto;margin:0 auto;border-radius:4px}
.lw-dialog figcaption{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 4px 4px}
.lw-dlg-label{font-family:var(--disp);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)}
.lw-dlg-cap{grid-column:1;font-family:var(--text);color:var(--soft)}
.lw-dlg-n{grid-column:2;grid-row:1/3;align-self:center;font-family:var(--disp);letter-spacing:.12em;color:var(--muted)}
.lw-close{position:absolute;top:-16px;right:-16px;width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:var(--bg);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;z-index:2}
.lw-nav{position:absolute;top:42%;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2,var(--line));background:rgba(11,11,14,.8);color:var(--ink);font-size:1.2rem;cursor:pointer}
.lw-nav:hover{border-color:var(--gold);color:var(--gold-hi)}
.lw-prev{left:12px}.lw-next{right:12px}

@media(max-width:760px){
  .lw-tools{align-items:stretch;width:100%}
  .lw-chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:0 -24px;padding:2px 24px 6px;scrollbar-width:none}
  .lw-chips::-webkit-scrollbar{display:none}
  .lw-chip{flex:none}
  .lw-arrows{display:none}
  .lw-rail{gap:18px;padding-inline:24px;scroll-padding-inline:24px}
  .lw-item{flex-basis:72vw;max-width:280px}
  .lw-badge{width:100%}
  .lw-prev{left:6px}.lw-next{right:6px}.lw-nav{top:auto;bottom:86px}
  .lw-close{top:8px;right:8px}
}
@media(prefers-reduced-motion:reduce){
  .lw-item{animation:none}
  .lw-badge,.lw-photo img{transition:none}
  .lw-item:hover .lw-badge{transform:none}.lw-item:hover .lw-photo img{transform:none}
}

/* THE CONTROL BAR (2026-10-15, Mike: "needs arrows or something to know where you are and to get it
   to play"). Under the badges: back, play/pause, forward, a progress line and "07 / 44". */
.lw-ctrl{display:flex;align-items:center;gap:12px;margin-top:6px}
.lw-ctrl .lw-arrow{display:inline-flex;align-items:center;justify-content:center}
.lw-ctrl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lw-play{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px 0 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold);background:var(--gold);color:var(--on-gold);font-family:var(--disp);font-weight:700;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase}
.lw-play:hover{background:var(--gold-hi,var(--gold))}
.lw-play svg{width:18px;height:18px}.lw-play .lw-i-play{fill:currentColor;stroke:none;display:none}
.lw-play[aria-pressed="false"]{background:transparent;color:var(--ink)}
.lw-play[aria-pressed="false"] .lw-i-play{display:block}.lw-play[aria-pressed="false"] .lw-i-pause{display:none}
.lw-play:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lw-track{flex:1;height:3px;border-radius:3px;background:var(--line2,var(--line));overflow:hidden;min-width:60px}
.lw-fill{display:block;height:100%;width:0;background:var(--gold);transition:width .45s ease}
.lw-count{margin:0;font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.lw-count b{color:var(--ink);font-weight:800}
@media(max-width:620px){.lw-ctrl{flex-wrap:wrap}.lw-track{order:5;flex-basis:100%}.lw-play-t{display:none}.lw-play{padding:0 14px}}
@media(prefers-reduced-motion:reduce){.lw-fill{transition:none}}