/* the ring moment: the title's pixels gather into a circle around a quiet invitation */
  #ringText{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:87;text-align:center;color:#fff;
    pointer-events:none;opacity:0;transition:opacity 1.1s ease;display:flex;flex-direction:column;align-items:center;gap:14px}
  #ringText .plusRing{opacity:1;transition:none}
  #ringText .big{font-family:'Alte Haas Grotesk',Helvetica,Arial,sans-serif;font-size:clamp(22px,2.4vw,32px);letter-spacing:0.01em;
    text-transform:none;line-height:1}
  #ringText .small{font-family:var(--font);font-size:clamp(11px,1vw,13px);letter-spacing:0.08em;color:rgba(255,255,255,0.86);margin-top:-4px}
  #ringText .soon{font-family:var(--font);font-size:clamp(8px,0.8vw,10px);letter-spacing:0.36em;text-transform:uppercase;color:#fff;margin-top:4px}
  #centreLine{margin-top:clamp(18px,3vh,34px);font-family:'Nocturne Cross Stitch',var(--display);
    font-size:clamp(15.6px,1.68vw,21.6px);color:#ffffff;white-space:nowrap;letter-spacing:0.05em;opacity:0}
  #ringText.on{opacity:1}
  body.ringOpen #labels, body.ringOpen #webCanvas, body.ringOpen #dedCard:not(.hidden){opacity:0.22;transition:opacity .5s ease}
  #labels, #webCanvas{transition:opacity .5s ease}
  /* ---------- reforestation card ---------- */
  #dedCard{position:fixed;right:22px;bottom:78px;width:min(520px,92vw);max-height:calc(100vh - 150px);overflow:auto;z-index:35;
    background:rgba(10,12,12,0.58);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
    border:1px solid rgba(255,255,255,0.14);border-radius:0;
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#f4f1ea;transition:opacity .5s, transform .5s}
  #dedCard .cardHead{display:flex;justify-content:space-between;align-items:center;padding:16px 22px 12px;
    font-family:var(--font);font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:rgba(244,241,234,0.7)}
  #dedCard .cardHead button{background:none;border:none;box-shadow:none;padding:0 2px;color:rgba(244,241,234,0.7);
    font-size:18px;line-height:1;cursor:pointer}
  #dedCard .cardHead button:hover{color:#fff}
  #dedCard .row{display:flex;align-items:center;gap:18px;padding:20px 24px;border-top:1px solid rgba(255,255,255,0.07)}
  #dedCard .row.lit{background:rgba(255,255,255,0.06)}
  #dedCard .num{font-family:var(--font);font-size:11px;color:rgba(244,241,234,0.55);flex:none;min-width:46px}
  #dedCard .ttl{flex:1;font-weight:300;font-size:clamp(17px,1.8vw,24px);letter-spacing:-0.01em;color:#f4f1ea;
    white-space:normal;overflow:visible;line-height:1.25}
  #dedCard .ttl.name{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,32px);letter-spacing:0.01em;line-height:1.3}
  #dedCard .row{flex-wrap:wrap}
  #dedCard .tag{font-family:var(--font);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
    color:rgba(244,241,234,0.75);text-decoration:none;flex:none}
  /* the attendee's event, on its own line under the name (lined up with it, past the number) */
  #dedCard .event{flex-basis:100%;margin:-12px 0 0 64px;font-family:var(--font);font-size:10.5px;letter-spacing:0.14em;
    text-transform:uppercase;color:rgba(244,241,234,0.7)}
  #dedCard .event[hidden]{display:none}
  #dedCard .row.place{display:block;padding:20px 24px 22px}
  #dedCard .row.place .ttl{white-space:normal}
  #dedCard .sub{margin-top:4px;font-weight:300;font-size:clamp(13px,1.2vw,15px);color:rgba(244,241,234,0.8)}
  #dedCard .coords{margin-top:8px;font-family:var(--font);font-size:10.5px;letter-spacing:0.14em;color:rgba(244,241,234,0.7)}
  #dedCard .act{display:inline-block;margin-top:18px;font-family:var(--font);font-size:10.5px;letter-spacing:0.2em;
    text-transform:uppercase;color:#f4f1ea;text-decoration:none;border:1px solid rgba(244,241,234,0.45);
    padding:11px 20px;transition:background .3s, border-color .3s}
  #dedCard .act:hover{background:rgba(244,241,234,0.1);border-color:#f4f1ea}
  #dedCard .tabs{display:flex;gap:26px;margin-top:20px;border-bottom:1px solid rgba(255,255,255,0.14)}
  #dedCard .tab{background:none;border:none;box-shadow:none;padding:0 0 11px;cursor:pointer;
    font-family:var(--font);font-size:11px;letter-spacing:0.26em;text-transform:uppercase;
    color:rgba(244,241,234,0.45);border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .3s, border-color .3s}
  #dedCard .tab:hover{color:rgba(255,255,255,0.85)}
  #dedCard .tab.on{color:#ffffff;border-bottom-color:#ffffff}
  #dedCard .tab.green{color:rgba(143,208,168,0.6)}
  #dedCard .tab.green:hover{color:#8fd0a8}
  #dedCard .tab.green.on{color:#8fd0a8;border-bottom-color:#8fd0a8}
  #dedCard .tpanel{display:none;padding-top:16px}
  #dedCard .tpanel.on{display:block}
  #dedCard, #dedCard *{border-radius:0}
  #dedCard .chain .dot{border-radius:50%}
  #dedCard .storyBox{padding:14px 18px 15px;border:1px dashed rgba(255,255,255,0.22);
    background:rgba(255,255,255,0.035);border-radius:0}
  #dedCard .storyBox .sTop{font-family:'Alte Haas Grotesk',Helvetica,Arial,sans-serif;font-size:17px;color:#ffffff;line-height:1}
  #dedCard .storyBox .sSub{margin-top:6px;font-weight:300;font-size:13px;color:rgba(244,241,234,0.72);line-height:1.35}
  #dedCard .storyBox .sSoon{margin-top:10px;font-family:var(--font);font-size:9.5px;letter-spacing:0.3em;
    text-transform:uppercase;color:rgba(255,255,255,0.6)}
  /* the chain: each link in the life of one dedication, top to bottom */
  #dedCard .chain{list-style:none;margin:0;padding:0 0 2px 0}
  #dedCard .chain li{position:relative;padding:0 0 17px 30px}
  #dedCard .chain li:last-child{padding-bottom:0}
  #dedCard .chain li::before{content:"";position:absolute;left:5.5px;top:14px;bottom:0;width:1px;
    background:rgba(255,255,255,0.20)}
  #dedCard .chain li:last-child::before{display:none}
  #dedCard .chain li.pending::before{background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,0.22) 0 3px, rgba(255,255,255,0) 3px 7px)}
  #dedCard .chain .dot{position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;
    border:1px solid rgba(255,255,255,0.45);background:transparent}
  #dedCard .chain li.done .dot{background:#ffffff;border-color:#ffffff;box-shadow:0 0 12px rgba(255,255,255,0.55)}
  #dedCard #pVerify{font-family:var(--font)}
  #dedCard .chain .k{font-family:var(--font);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
    color:#ffffff;line-height:1.25}
  #dedCard .chain li.pending .k{color:rgba(244,241,234,0.72)}
  #dedCard .chain .v{margin-top:6px;font-family:var(--font);font-size:9.5px;letter-spacing:0.24em;
    text-transform:uppercase;color:#8fd0a8}
  #dedCard .chain li.pending .v{color:rgba(143,208,168,0.62)}
  #dedCard .chain li.done .dot{background:#8fd0a8;border-color:#8fd0a8;box-shadow:0 0 12px rgba(143,208,168,0.6)}
  #dedCard .chainFoot{display:inline-block;margin-top:15px;font-family:var(--font);font-size:9.5px;letter-spacing:0.24em;
    text-transform:uppercase;color:#8fd0a8;text-decoration:none;
    border-bottom:1px solid rgba(143,208,168,0.35);padding-bottom:3px}
  #dedCard .chainFoot:hover{color:#bfe6cd;border-bottom-color:#bfe6cd}
  @media (max-width:640px){ #dedCard{right:50%;transform:translateX(50%);bottom:84px} }

  /* ---------- floating dedication text ---------- */
  #floatText{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;z-index:38;
    pointer-events:none;transition:opacity 1.6s ease;opacity:0;max-width:min(560px,90vw)}
  #floatText .to{font-size:26px;letter-spacing:0.06em;text-shadow:0 0 26px currentColor}
  #floatText .m{margin-top:10px;font-style:italic;font-size:16px;color:var(--mist);line-height:1.6}

  /* ---------- event card: always open, bottom right, for the projected screen ---------- */
  #eventCard[hidden]{display:none!important}
  #eventCard{position:fixed;right:22px;bottom:22px;width:min(340px,92vw);z-index:34;pointer-events:none;
    background:rgba(10,12,12,0.58);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
    border:1px solid rgba(255,255,255,0.14);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#f4f1ea}
  #eventCard .cardHead{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 10px;
    font-family:var(--font);font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:rgba(244,241,234,0.7)}
  #eventCard .live{display:inline-flex;align-items:center;gap:7px;color:#8fd0a8}
  #eventCard .liveDot{width:6px;height:6px;border-radius:50%;background:#8fd0a8;box-shadow:0 0 8px #8fd0a8;animation:pulse 2.4s ease-in-out infinite}
  #eventCard .row{padding:16px 20px;border-top:1px solid rgba(255,255,255,0.07)}
  #eventCard .row.place .ttl{font-weight:300;font-size:clamp(18px,1.6vw,23px);letter-spacing:-0.01em;line-height:1.25}
  #eventCard .sub{margin-top:4px;font-weight:300;font-size:clamp(13px,1.1vw,15px);color:rgba(244,241,234,0.8)}
  #eventCard .coords{margin-top:8px;font-family:var(--font);font-size:10.5px;letter-spacing:0.14em;color:rgba(244,241,234,0.7)}
  #eventCard .row.tally{display:flex;align-items:baseline;gap:12px}
  #eventCard .count{font-family:'Alte Haas Grotesk',Helvetica,Arial,sans-serif;font-size:clamp(40px,3.6vw,56px);line-height:1;
    letter-spacing:-0.02em;color:#ffdf96;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,217,140,0.35)}
  #eventCard .count.bump{animation:countBump 1.2s ease-out}
  @keyframes countBump{0%{transform:scale(1)}18%{transform:scale(1.14)}100%{transform:scale(1)}}
  #eventCard .count{display:inline-block;transform-origin:left bottom}
  #eventCard .unit{font-family:var(--font);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(244,241,234,0.75)}
  #eventCard .row.latest{display:flex;align-items:baseline;gap:12px;padding-bottom:18px}
  #eventCard .k{font-family:var(--font);font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(244,241,234,0.55);flex:none}
  #eventCard .gold{font-size:clamp(17px,1.5vw,22px);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    background:linear-gradient(100deg,#e3b24a 0%,#ffeab0 22%,#fffaf0 28%,#ffdf96 38%,#e3b24a 50%,#ffeab0 72%,#fffaf0 78%,#ffdf96 88%,#e3b24a 100%);
    background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:goldShimmer 3.6s linear infinite}
  body.bloom #eventCard{background:rgba(252,248,246,0.72);border-color:rgba(27,33,25,0.16);color:#1b2119}
  body.bloom #eventCard .cardHead,body.bloom #eventCard .coords,body.bloom #eventCard .unit{color:rgba(27,33,25,0.7)}
  body.bloom #eventCard .sub{color:rgba(27,33,25,0.75)}
  body.bloom #eventCard .k{color:rgba(27,33,25,0.55)}
  body.bloom #eventCard .row{border-top-color:rgba(27,33,25,0.10)}
  body.bloom #eventCard .live{color:#3a6e4a} body.bloom #eventCard .liveDot{background:#3a6e4a;box-shadow:none}
  body.bloom #eventCard .count{color:#a8741a;text-shadow:none}
  body.bloom #eventCard .gold{background-image:linear-gradient(100deg,#8a5a12 0%,#c9962e 22%,#e8b957 28%,#b07a1c 38%,#8a5a12 50%,
      #c9962e 72%,#e8b957 78%,#b07a1c 88%,#8a5a12 100%)}
  @media (prefers-reduced-motion: reduce){ #eventCard .gold,#eventCard .liveDot,#eventCard .count.bump{animation:none} }
  /* on shorter screens, lift the season switch so it clears the event card */
  @media (max-height:900px) and (min-width:641px){ #seasonPanel{top:40%} }

  /* ---------- donation QR: bottom left, just above the walk hint, matching the event card ---------- */
  #donateQR{position:fixed;left:22px;bottom:48px;z-index:34;margin:0;pointer-events:none;padding:14px 14px 12px;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    background:rgba(10,12,12,0.58);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
    border:1px solid rgba(255,255,255,0.14)}
  /* the light margin round the code is what lets phones read it on a dark screen */
  #donateQR img{display:block;width:150px;height:150px;object-fit:contain;padding:16px;background:#e9e9e9;border-radius:6px}
  #donateQR figcaption{font-family:var(--font);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(244,241,234,0.85)}
  body.bloom #donateQR{background:rgba(252,248,246,0.72);border-color:rgba(27,33,25,0.16)}
  body.bloom #donateQR figcaption{color:rgba(27,33,25,0.75)}