/* Houdini 100 layer of /person/?slug=harry-houdini (templates/person-houdini.php). A theatre-poster band with the
   centenary clock, sourced facts, the 1926 timeline, a schematic map and the centenary events. Motion is transform
   and opacity only (plus a one-time route draw), and stops for prefers-reduced-motion. v1.0.0 */
.hx100{--hx-night:#120d0a;--hx-wood:#1c130d;--hx-gold:#d9b25c;--hx-cream:#f7ecd6;--hx-red:#8f1d1d;margin:0 0 60px}
.hx100-band{position:relative;overflow:hidden;isolation:isolate;padding:70px 0 58px;background:radial-gradient(ellipse at 50% -10%,#4a2c14 0%,rgba(74,44,20,0) 60%),linear-gradient(180deg,var(--hx-night),var(--hx-wood));color:var(--hx-cream)}
.hx100-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hx100-num{position:absolute;right:-1%;bottom:-18%;font-size:clamp(220px,32vw,480px);font-weight:900;line-height:1;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:2px rgba(217,178,92,.3)}
.hx100-curtain{position:absolute;top:0;bottom:0;width:13%;background:repeating-linear-gradient(90deg,#5e1111 0 14px,#7d1818 14px 26px,#4b0d0d 26px 34px);transform-origin:top center;animation:hx-sway 7s ease-in-out infinite alternate}
.hx100-curtain-l{left:0}.hx100-curtain-r{right:0;animation-delay:-3.5s}
.hx100-spot{position:absolute;left:28%;top:-30%;width:44%;height:160%;background:radial-gradient(ellipse at 50% 0%,rgba(255,235,180,.2) 0%,rgba(255,235,180,0) 62%);animation:hx-spot 11s ease-in-out infinite alternate}
.hx100-band-in{position:relative;padding-inline:14%}
.hx100-kicker{margin:0 0 14px;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;font-weight:700;color:var(--hx-gold)}
.hx100 h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(40px,5.4vw,80px);line-height:1;letter-spacing:-.04em;margin:0 0 20px;max-width:900px}
.hx100-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.6;max-width:760px;margin:0 0 28px;color:#f0e2c8}
.hx100-clock{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px}
.hx100-clock>div{min-width:92px;padding:12px 14px 10px;text-align:center;background:rgba(217,178,92,.1);border:1px solid rgba(217,178,92,.5)}
.hx100-clock b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,4.2vw,58px);line-height:1;color:var(--hx-gold);font-variant-numeric:tabular-nums}
.hx100-clock span{display:block;margin-top:6px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;opacity:.8}
.hx100-clock p{margin:0 0 6px 6px;font-size:14px;font-weight:700}
.hx100-now{font-size:20px;font-weight:700;color:var(--hx-gold);margin:0}
.hx100-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:-26px;position:relative;z-index:1}
.hx100-facts>div{padding:22px 22px 18px;background:var(--hx-cream);border:1px solid #d8c7a2;border-left-width:0}
.hx100-facts>div:first-child{border-left-width:1px}
.hx100-facts b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,3.4vw,50px);line-height:1;letter-spacing:-.03em;color:var(--hx-red)}
.hx100-facts p{margin:10px 0 10px;font-size:13px;line-height:1.5}
.hx-cite{font-size:10px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;color:#6b5a35;text-decoration:none;border-bottom:1px solid #c9b07a}
.hx-cite:hover{color:var(--ink)}
.hx100-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;margin-top:56px}
.hx100-h{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.04em;line-height:1.1;margin:0 0 24px;padding-bottom:12px;border-bottom:3px solid var(--ink)}
.hx100-timeline{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.hx100-timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;background:linear-gradient(180deg,var(--hx-gold),var(--hx-red) 70%,var(--hx-gold));transform-origin:top center}
.hx100-step{position:relative;padding:0 0 28px}
.hx100-step::before{content:"";position:absolute;left:-29px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--paper);border:3px solid var(--hx-gold)}
.hx100-step.is-death::before{background:var(--hx-red);border-color:var(--hx-red);animation:hx-beat 2.4s ease-in-out infinite}
.hx100-step.is-now::before{background:var(--hx-gold)}
.hx100-step time{display:block;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;color:#6b5a35}
.hx100-step h4{margin:6px 0 8px;font-size:22px;letter-spacing:-.5px;line-height:1.2}
.hx100-step.is-death h4{color:var(--hx-red)}
.hx100-step p{margin:0 0 8px;font-size:15px;line-height:1.65}
.hx100-map{margin:0;background:var(--hx-cream);border:1px solid #d8c7a2}
.hx100-map svg{display:block;width:100%;height:auto}
.hx100-paper{fill:#f7ecd6}
.hx100-gridline{fill:none;stroke:#e6d6b3;stroke-width:1}
.hx100-street{fill:none;stroke:#b9a274;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.hx100-street-name{font:700 12px Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;fill:#7d6a43}
.hx100-route{fill:none;stroke:var(--hx-red);stroke-width:3;stroke-dasharray:4 7;stroke-linecap:round}
.hx100-pin-halo{fill:rgba(143,29,29,.18);transform-box:fill-box;transform-origin:center;animation:hx-halo 2.8s ease-out infinite}
.hx100-pin-dot{fill:var(--hx-red);stroke:#fff;stroke-width:2}
.hx100-pin.is-today .hx100-pin-dot{fill:#b8860b}
.hx100-pin.is-today .hx100-pin-halo{fill:rgba(184,134,11,.25)}
.hx100-pin-n{font:700 12px Arial,sans-serif;fill:#fff;text-anchor:middle}
.hx100-pin-label,.hx100-pin-sub{paint-order:stroke;stroke:#f7ecd6;stroke-width:4px;stroke-linejoin:round}
.hx100-pin-label{font:700 15px Arial,sans-serif;fill:#1c130d}
.hx100-pin-sub{font:12px Arial,sans-serif;fill:#5b4a2a}
.hx100-pin-label.is-left,.hx100-pin-sub.is-left{text-anchor:end}
.hx100-map figcaption{padding:10px 14px;font-size:11px;color:#5b4a2a;border-top:1px solid #d8c7a2}
.hx100-legend{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.hx100-legend li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.hx100-legend b{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--hx-red);color:#fff;font-size:12px}
.hx100-legend span{font-weight:700;font-size:15px}
.hx100-legend small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.hx100-legend a{font-size:12px;font-weight:700;white-space:nowrap}
.hx100-events{margin-top:60px}
.hx100-tickets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hx100-ticket{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr) 26px;gap:18px;align-items:start;padding:20px 20px 20px 0;background:var(--hx-cream);border:1px solid #d8c7a2;border-left:6px solid var(--hx-gold);transition:transform .2s}
.hx100-ticket:hover{transform:translateY(-3px)}
.hx100-ticket time{display:flex;flex-direction:column;align-items:center;padding-right:10px;border-right:2px dashed rgba(28,19,13,.3);text-align:center;align-self:stretch}
.hx100-ticket time b{font-family:Georgia,"Times New Roman",serif;font-size:42px;line-height:1}
.hx100-ticket time span{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.hx100-ticket time i{margin-top:8px;font-style:normal;font-size:11px;font-weight:700;line-height:1.35}
.hx100-ticket h4{margin:0 0 8px;font-size:20px;line-height:1.2}
.hx100-ticket h4 a{text-decoration:none}
.hx100-ticket h4 a::after{content:"";position:absolute;inset:0}
.hx100-ticket p{margin:0 0 8px;font-size:13px;line-height:1.55}
.hx100-where{font-weight:700;font-size:12px!important}
.hx100-go{font-size:22px;font-weight:700}
.hx100-ticket.is-past{opacity:.6}
.hx100-past{font-size:11px!important;text-transform:uppercase;letter-spacing:1.4px;font-weight:700}
.hx100-more{margin:22px 0 0}
.hx100-more a{display:inline-block;padding:14px 20px;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none}
.hx100-sources{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:12px}
.hx100-sources h3{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 10px}
.hx100-sources ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.hx100-sources p{color:var(--muted);margin:12px 0 0}
@supports (animation-timeline:view()){.hx100-step,.hx100-ticket,.hx100-facts>div{animation:hx-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}.hx100-route{animation:hx-draw linear both;animation-timeline:view();animation-range:entry 10% cover 50%}}
@keyframes hx-rise{from{opacity:.15;translate:0 30px}to{opacity:1;translate:0 0}}
@keyframes hx-draw{from{stroke-dashoffset:120;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
@keyframes hx-sway{from{transform:skewX(0deg) scaleX(1)}to{transform:skewX(1.5deg) scaleX(1.06)}}
@keyframes hx-spot{from{transform:translate3d(-14%,0,0)}to{transform:translate3d(14%,0,0)}}
@keyframes hx-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.35)}24%{transform:scale(1)}36%{transform:scale(1.2)}}
@keyframes hx-halo{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@media(max-width:1100px){.hx100-grid{grid-template-columns:1fr;gap:46px}.hx100-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.hx100-facts>div:nth-child(3){border-left-width:1px}.hx100-tickets{grid-template-columns:1fr}.hx100-band-in{padding-inline:10%}}
@media(max-width:650px){
 .hx100-band{padding:52px 0 52px}
 .hx100-band-in{padding-inline:0}
 .hx100-curtain{width:7%}
 .hx100-num{font-size:200px;bottom:-8%;right:-10%}
 .hx100-clock>div{min-width:0;flex:1;padding:10px 6px 8px}
 .hx100-clock b{font-size:34px}
 .hx100-clock p{flex-basis:100%;margin:2px 0 0}
 .hx100-facts{grid-template-columns:1fr;margin-top:-18px}
 .hx100-facts>div{border-left-width:1px;border-top-width:0}
 .hx100-facts>div:first-child{border-top-width:1px}
 .hx100-step h4{font-size:20px}
 .hx100-ticket{grid-template-columns:72px minmax(0,1fr) 20px;gap:12px;padding:16px 14px 16px 0}
 .hx100-ticket time b{font-size:32px}
 .hx100-pin-label,.hx100-pin-sub{display:none}
 .hx100-pin-dot,.hx100-pin-n{transform-box:fill-box;transform-origin:center;transform:scale(1.7)}
 .hx100-street-name{font-size:22px}
 .hx100-legend li{grid-template-columns:28px minmax(0,1fr)}
 .hx100-legend a{grid-column:2}
}
@media(prefers-reduced-motion:reduce){.hx100-curtain,.hx100-spot,.hx100-step.is-death::before,.hx100-pin-halo,.hx100-step,.hx100-ticket,.hx100-facts>div,.hx100-route{animation:none}}