*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f2ede4;justify-content:center;align-items:center;font-family:DM Sans,-apple-system,BlinkMacSystemFont,sans-serif;display:flex}.running-header{letter-spacing:.18em;text-transform:uppercase;color:#8c857a;z-index:10;-webkit-user-select:none;user-select:none;font-family:DM Sans,sans-serif;font-size:10px;font-weight:500;position:fixed;top:28px;left:36px}.running-header:after{display:none}.spread{justify-content:center;align-items:center;gap:0;width:100%;max-width:1200px;padding:72px 48px 100px;transition:opacity .4s;display:flex}.spread.mode-fade{opacity:0}.canvas-frame{flex:none;justify-content:center;align-items:center;width:62%;padding-right:48px;display:flex}#canvas{border:1px solid #d6d0c6;display:block}#overlay{border-left:1px solid #d6d0c6;flex:none;width:30%;min-width:200px;max-width:320px;padding-left:64px;transition:opacity .5s}.plate-label{letter-spacing:.16em;text-transform:uppercase;color:#c41e3a;margin-bottom:16px;font-family:DM Sans,sans-serif;font-size:10px;font-weight:500}#title-link{text-decoration:none;display:block}#title-link:visited,#title-link:hover,#title-link:active{text-decoration:none}#title-link:hover #title{color:#000}#title{letter-spacing:.01em;color:#1a1a1a;font-family:Playfair Display,Georgia,serif;font-size:28px;font-weight:400;line-height:1.3;transition:color .3s}.metadata-rule{background:#d6d0c6;width:32px;height:1px;margin:16px 0}#subtitle{color:#8c857a;letter-spacing:.01em;font-family:DM Sans,sans-serif;font-size:14px;font-weight:300;line-height:1.6}#subtitle a,#title-link:hover #subtitle{color:#c41e3a}#timeline{background:linear-gradient(#f2ede4d9,#f2ede4fa);border-top:.5px solid #d6d0c6;height:36px;padding:0 48px;transition:opacity .4s;position:fixed;bottom:0;left:0;right:0}#timeline.hidden{opacity:0;pointer-events:none}#timeline-track{width:100%;height:100%;position:relative}#timeline-line{opacity:0}.timeline-dot{cursor:pointer;z-index:1;background:#c4bdb2;border:none;border-radius:0;width:1px;height:8px;padding:0;transition:height .25s,background .25s;position:absolute;top:0;transform:translate(-50%)}.timeline-dot:before{content:"";position:absolute;inset:-4px -6px}.timeline-dot:hover{background:#8c857a;height:14px}.timeline-dot.active{background:#c41e3a;height:14px}.timeline-year{color:#a9a299;letter-spacing:.08em;white-space:nowrap;pointer-events:none;font-family:DM Sans,sans-serif;font-size:8px;font-weight:400;position:absolute;top:18px;transform:translate(-50%)}.timeline-tooltip{color:#3e3830;white-space:nowrap;pointer-events:none;opacity:0;background:#faf7f2;border:.5px solid #d6d0c6;margin-bottom:4px;padding:5px 12px;font-family:Playfair Display,serif;font-size:11px;font-weight:400;transition:opacity .25s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.timeline-dot:hover .timeline-tooltip{opacity:1}#controls{z-index:10;gap:24px;display:flex;position:fixed;top:28px;right:36px}#controls button{letter-spacing:.14em;text-transform:uppercase;color:#a9a299;cursor:pointer;background:0 0;border:none;padding:4px 0;font-family:DM Sans,sans-serif;font-size:10px;font-weight:500;transition:color .3s;position:relative}#controls button:after{content:"";transform-origin:0;background:#c41e3a;width:100%;height:1.5px;transition:transform .3s;position:absolute;bottom:-2px;left:0;transform:scaleX(0)}#controls button:hover{color:#5c564e}#controls button.active{color:#c41e3a}#controls button.active:after{transform:scaleX(1)}@media (width<=860px){body{justify-content:flex-start;align-items:center}.spread{flex-direction:column;align-items:center;gap:0;padding:72px 24px 110px}.canvas-frame{justify-content:center;width:100%;padding-right:0}#overlay{width:100%;max-width:480px;min-width:unset;text-align:center;border-top:1px solid #d6d0c6;border-left:none;margin-top:20px;padding-top:20px;padding-left:0}.plate-label{margin-bottom:10px}.metadata-rule{margin:12px auto}#title{font-size:22px}#subtitle{font-size:13px}.running-header{font-size:9px;top:20px;left:24px}#controls{gap:18px;top:20px;right:24px}#controls button{font-size:9px}#timeline{width:90%;bottom:44px}}@media (width<=480px){.spread{padding:64px 16px 100px}.running-header{top:16px;left:16px}#controls{gap:14px;top:16px;right:16px}#title{font-size:20px}#timeline{width:92%;bottom:38px}}
