/* Back to top (12 Oct): a floating gold dial that follows the whole page. The ring fills with how far you have read,
   the lettering turns as you scroll, and the arrow lifts on hover. The link itself never moves (no flicker). */
.tt { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 90; width: 84px; height: 84px; display: grid; place-items: center;
  border-radius: 50%; text-decoration: none; color: #CDA85F; -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s .5s; }
.tt.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tt > * { grid-area: 1 / 1; pointer-events: none; }
.tt-disc { width: 84px; height: 84px; border-radius: 50%; background: rgba(23,17,14,.9); box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(205,168,95,.22); }
.tt-text { width: 84px; height: 84px; overflow: visible; will-change: transform; }
.tt-text text { font: 600 8.6px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 1px; fill: rgba(241,233,222,.72); text-transform: uppercase; }
.tt-ring { width: 54px; height: 54px; transform: rotate(-90deg); }
.tt-ring circle { fill: none; stroke-width: 2; }
.tt-ring .tr { stroke: rgba(205,168,95,.2); } .tt-ring .pr { stroke: #CDA85F; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.tt-core { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #CDA85F; color: #17110E; transition: background .35s, color .35s, transform .45s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.tt-core svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tt-core svg + svg { position: absolute; transform: translateY(26px); }
.tt-core { position: relative; }
.tt-core svg { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) {
  .tt:hover .tt-core { background: #17110E; color: #CDA85F; box-shadow: inset 0 0 0 1.5px #CDA85F; transform: scale(1.06); }
  .tt:hover .tt-core svg:first-child { transform: translateY(-26px); } .tt:hover .tt-core svg + svg { transform: none; }
  .tt:hover .tt-text text { fill: #CDA85F; }
}
.tt:focus-visible { outline: 2px solid #CDA85F; outline-offset: 4px; }
@media (max-width: 600px) { .tt, .tt-disc, .tt-text { width: 70px; height: 70px; } .tt-ring { width: 46px; height: 46px; } .tt-core { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .tt, .tt-core, .tt-core svg { transition: none; } }