@font-face{font-family:'Rubik Dirt';src:url('fonts/RubikDirt-Regular.woff2') format('woff2'),url('fonts/RubikDirt-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{
  --coral:#ee7b58; --coral-deep:#c9532f; --butter:#fbefb5; --butter-hi:#fff7d6; --ink:#1d130f;
  --amber:#e9930f; --sage:#a9c3a5; --muted:#6b4a3a; --accent-text:#b5442a;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --font:var(--sans);
  --display:'Rubik Dirt','Playfair Display',Georgia,serif;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{background:var(--coral);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100dvh}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.app{display:grid;grid-template-columns:minmax(380px,450px) 1fr;gap:22px;height:100dvh;padding:22px}

/* ---------- left column ---------- */
.side{overflow-y:auto;padding:2px 8px 44px 2px;scrollbar-width:thin;scrollbar-color:var(--coral-deep) transparent}
.brand{position:relative;margin-bottom:22px;padding-top:6px}
.mug{position:absolute;right:-6px;top:44px;width:132px;height:auto;overflow:visible}
.kicker{font-size:15px;font-weight:700;color:var(--ink);opacity:.8;max-width:60%}
h1{font-family:var(--display);font-size:clamp(40px,4.2vw,54px);line-height:1.02;font-weight:400;letter-spacing:0;margin-top:10px;color:var(--ink)}
h1 span{display:block}
.preview{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:99px;background:var(--ink);color:var(--butter);font-size:13px;font-weight:700}

/* ---------- Right now card with dark tray ---------- */
.now{position:sticky;top:0;z-index:20;background:var(--butter);border-radius:30px;padding:20px 22px 0;margin-bottom:30px;overflow:hidden;
  box-shadow:0 22px 34px -12px rgba(110,35,10,.45)}
.now-label{font-size:15px;font-weight:700;color:var(--accent-text)}
.now-clock{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.now-clock .u{display:flex;flex-direction:column;align-items:center;min-width:86px;padding:10px 14px 9px;border-radius:20px;background:var(--ink);color:var(--butter)}
.now-clock .u b{font-family:var(--sans);font-weight:700;font-size:50px;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.now-clock .u i{font-style:normal;font-weight:700;font-size:14px;margin-top:5px;color:#f6b94d}
.now-clock.hide{display:none}
.now-cap{font-size:15px;color:var(--muted);font-weight:500;margin-top:4px;line-height:1.35}
.now-where{margin-top:14px;padding-top:14px;border-top:2px dotted rgba(29,19,15,.3)}
.now-where b{display:block;font-family:var(--display);font-size:24px;font-weight:400;line-height:1.15}
.now-where span{font-size:15px;color:var(--muted);font-weight:500}
.now-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px -22px 0;padding:16px 22px;background:var(--ink)}
.now-dist{margin:0 -22px;padding:0 22px 16px;background:var(--ink);font-size:14px;font-weight:700;color:#f6b94d;line-height:1.35}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:99px;border:2px solid rgba(251,239,181,.45);background:transparent;color:var(--butter);
  font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .08s,background .15s}
.btn:hover{background:rgba(251,239,181,.14)} .btn:active{transform:scale(.97)}
.btn.primary{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.btn.primary:hover{background:#f48d6c}
.btn.small{min-height:38px;padding:0 15px;font-size:14px;border-color:var(--ink);color:var(--ink)}
.btn.small:hover{background:rgba(29,19,15,.08)}
.btn.small.primary{background:var(--ink);border-color:var(--ink);color:var(--butter)}
.btn.small.primary:hover{background:#3a2a22}

/* ---------- vertical timeline ---------- */
.timeline{position:relative;list-style:none;padding:0}
.timeline .line{position:absolute;left:30px;width:5px;margin-left:-2.5px;border-radius:5px;background:var(--coral-deep);top:0;height:0;z-index:0}
.timeline .fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--ink);border-radius:5px}
.stop{position:relative;padding-left:76px;margin-bottom:18px;z-index:1}
.node{position:absolute;left:4px;top:16px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--butter);border:3.5px solid var(--ink);font-family:var(--serif);font-weight:900;font-size:24px;color:var(--ink);transition:background .3s,color .3s}
.card{background:var(--butter);border-radius:26px;padding:16px 20px 18px;box-shadow:0 14px 24px -14px rgba(110,35,10,.5);transition:background .3s,color .3s}
.when{font-size:15px;font-weight:700;color:var(--accent-text)}
.card h2{font-family:var(--display);font-size:26px;font-weight:400;line-height:1.15;margin-top:4px}
.where{font-size:16px;font-weight:500;color:var(--muted);margin-top:3px}
.note{font-size:15px;margin-top:10px;line-height:1.4}
.timer{display:none;margin-top:12px;font-size:15px;font-weight:700;color:var(--accent-text)}
.timer b{font-family:var(--sans);font-size:28px;font-weight:700;letter-spacing:0;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;margin-left:8px}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

.stop.past .node{background:var(--ink);color:var(--butter)}
.stop.past .card{background:#f3c5a0;color:#6b4a3a;box-shadow:none}
.stop.past .card h2{color:#5a3a2c}
.stop.next .node{border-style:dashed;background:var(--butter-hi)}
.stop.next .card{box-shadow:inset 0 0 0 3px var(--ink),0 14px 24px -14px rgba(110,35,10,.5)}
.stop.next .timer{display:block}
.stop.active .node{background:var(--amber);animation:beat 1.8s ease-in-out infinite}
.stop.active .card{background:var(--ink);color:var(--butter)}
.stop.active .when{color:#f6b94d}
.stop.active .where{color:#dccb9c}
.stop.active .timer{display:block;color:#f6b94d}
.stop.active .timer b{color:var(--butter)}
.stop.active .btn.small{border-color:rgba(251,239,181,.5);color:var(--butter)}
.stop.active .btn.small:hover{background:rgba(251,239,181,.14)}
.stop.active .btn.small.primary{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.small.map{background:var(--amber);border-color:var(--ink);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.btn.small.map:hover{background:#f4a52b}
.btn.small.map:active{box-shadow:none;transform:translateY(3px)}
.btn.small.map::before{content:"";width:15px;height:17px;margin-right:7px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat}
.stop.active .btn.small.map{background:var(--butter);border-color:var(--butter);color:var(--ink);box-shadow:0 3px 0 rgba(251,239,181,.35)}
.stop.active .btn.small.map:hover{background:var(--butter-hi)}
.stop.sel .card{outline:3px dashed var(--ink);outline-offset:4px}
@keyframes beat{50%{box-shadow:0 0 0 9px rgba(29,19,15,.18)}}

.foot{margin-top:30px;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink);opacity:.75;max-width:34ch}

/* ---------- map ---------- */
.mapwrap{position:relative;background:#f3e1b2;min-height:0;border:3.5px solid var(--ink);border-radius:38px;overflow:hidden;box-shadow:0 30px 44px -18px rgba(110,35,10,.55)}
#map{position:absolute;inset:0;touch-action:none;cursor:grab;overflow:hidden}
#map:active{cursor:grabbing}
#map svg{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none}
.mapctl{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:10px;z-index:5}
.mapctl button{width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);background:var(--butter);font-family:var(--serif);font-size:24px;font-weight:900;cursor:pointer;line-height:1}
.mapctl button:hover{background:var(--butter-hi)}

/* pins (drawn inside the svg, in screen-pixel units) */
.pin{cursor:pointer}
.pin .disc{fill:var(--butter);stroke:var(--ink);stroke-width:3.5}
.pin .pn{font-family:var(--serif);font-weight:900;font-size:19px;text-anchor:middle;fill:var(--ink);pointer-events:none}
.pin .pulse{fill:var(--coral);opacity:0}
.pin .plabel{font-family:var(--sans);font-weight:700;font-size:16px;fill:var(--ink);stroke:#f9ecc0;stroke-width:6px;paint-order:stroke;stroke-linejoin:round;opacity:0;pointer-events:none}
.pin.past .disc{fill:#cdb98d;stroke:#7c6847}
.pin.next .disc{fill:var(--amber)}
.pin.current .disc{fill:var(--coral);stroke-width:4}
.pin.current .pulse{animation:pulse 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
.pin.current .plabel,.pin.sel .plabel,.pin.next .plabel{opacity:1}
@keyframes pulse{0%{transform:scale(.6);opacity:.65}100%{transform:scale(2.3);opacity:0}}
.you .dot{fill:#2563eb;stroke:#fff;stroke-width:3}
.you .ring{fill:rgba(37,99,235,.18);stroke:#2563eb;stroke-width:1.5}

/* ---------- phones & small screens ---------- */
@media (max-width:860px){
  .app{display:flex;flex-direction:column;height:auto;padding:16px 14px 0;gap:0}
  .side{display:contents}
  .brand{order:1;margin:0 0 14px;padding-top:4px}
  .mug{width:104px;right:-4px;top:30px}
  h1{font-size:38px;margin-top:6px}
  .kicker{font-size:14px}
  .now{order:2;position:sticky;top:8px;margin:0 0 16px;padding:14px 18px 0;border-radius:26px}
  .now-clock{gap:8px;margin-top:8px}
  .now-clock .u{min-width:74px;padding:8px 12px 7px;border-radius:18px}
  .now-clock .u b{font-size:42px}
  .now-where{margin-top:10px;padding-top:10px}
  .now-where b{font-size:21px}
  .now-actions{margin:14px -18px 0;padding:12px 18px;gap:6px;flex-wrap:nowrap}
  .now-dist{margin:0 -18px;padding:0 18px 12px}
  .btn{padding:0 13px;min-height:42px;font-size:14px}
  .mapwrap{order:3;height:70vw;min-height:250px;max-height:50dvh;border-radius:30px}
  .mapctl{right:10px;top:10px;gap:8px}
  .mapctl button{width:40px;height:40px;font-size:21px}
  .timeline{order:4;margin:28px 0 0}
  .stop{padding-left:66px}
  .node{width:48px;height:48px;font-size:22px;left:2px}
  .timeline .line{left:26px}
  .foot{order:5;padding:0 2px 40px}
  .pin .plabel{font-size:15px}
  .pin.next:not(.sel):not(.current) .plabel{opacity:0}
  body.scrolled .now{padding:10px 18px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  body.scrolled .now-cap,body.scrolled .now-where,body.scrolled .now-actions,body.scrolled .now-dist{display:none}
  body.scrolled .now-clock{margin:0;gap:6px}
  body.scrolled .now-clock .u{flex-direction:row;align-items:baseline;gap:4px;min-width:0;padding:5px 10px;border-radius:14px}
  body.scrolled .now-clock .u b{font-size:24px}
  body.scrolled .now-clock .u i{font-size:12px;margin:0}
  body.scrolled .now-label{font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}