/* Section progress tracker for long case-study pages.
   Include with <link rel="stylesheet" href="/css/progress.css"> and <script src="/js/progress.js" defer>.
   It reads every <section class="s" id="…"> inside <main> and builds itself; nothing else to add.
   Desktop (mouse): a sticky rail on the right. Dots for every section, a gold line that fills as you
   read, and labels for the section above, the one you are in and the next one (all on hover).
   Phones and touch: a small pill at the bottom that names the current section and opens the full list. */
.sp{
  --sp-gold:var(--gold,#C9A96E); --sp-ink:var(--ink,#1c1b19); --sp-mute:var(--mute,#5d5a52);
  --sp-line:var(--line,rgba(28,27,25,.12)); --sp-glass:var(--glass,rgba(255,255,255,.55));
  --sp-display:var(--display,'Josefin Sans',system-ui,sans-serif); --sp-body:var(--body,Jost,system-ui,sans-serif);
  --sp-ease:cubic-bezier(.2,.7,.2,1);
  position:fixed;z-index:8;font-family:var(--sp-body);
  opacity:0;visibility:hidden;transition:opacity .4s var(--sp-ease),visibility 0s linear .4s,transform .4s var(--sp-ease)
}
.sp.is-on{opacity:1;visibility:visible;transition:opacity .4s var(--sp-ease),visibility 0s,transform .4s var(--sp-ease)}
.sp-glass{background:var(--sp-glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--sp-line)}

.sp ol{list-style:none;margin:0;padding:0;position:relative}
.sp a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--sp-mute)}
.sp-num{font:700 11px/1 var(--sp-display);letter-spacing:.12em;color:var(--sp-gold);font-variant-numeric:tabular-nums}
.sp-lbl{font:500 13px/1.3 var(--sp-body)}
.sp-dot{flex:none;width:10px;height:10px;margin:2px;border-radius:50%;border:1.5px solid var(--sp-mute);background:var(--bg,#F0EBE1);opacity:.55;transition:transform .35s var(--sp-ease),background-color .35s,border-color .35s,opacity .35s,box-shadow .35s}
.sp .is-past .sp-dot{background:var(--sp-gold);border-color:var(--sp-gold);opacity:1}
.sp .is-cur .sp-dot{background:var(--sp-gold);border-color:var(--sp-gold);opacity:1;transform:scale(1.35);box-shadow:0 0 0 4px rgba(201,169,110,.25)}
.sp .is-cur a{color:var(--sp-ink)}
.sp .is-cur .sp-lbl{font-weight:600}
.sp-group{font:600 10.5px/1.5 var(--sp-display);letter-spacing:.18em;text-transform:uppercase;color:var(--sp-gold)}
/* the line behind the dots: JS sets its top, left and height from the first and last dot */
.sp-track{position:absolute;width:2px;border-radius:2px;background:var(--sp-line);pointer-events:none}
.sp-fill{position:absolute;inset:0;border-radius:2px;background:var(--sp-gold);transform-origin:top;transform:scaleY(0);transition:transform .25s ease-out}
.sp a:focus-visible,.sp-pill:focus-visible{outline:2px solid var(--sp-gold);outline-offset:3px;border-radius:8px}

/* phones and touch screens: a pill at the bottom, tap it for the list */
.sp{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translate(-50%,12px);width:max-content;max-width:calc(100% - 32px)}
.sp.is-on{transform:translate(-50%,0)}
.sp-pill{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;max-width:100%;padding:0 16px 0 18px;border-radius:99px;overflow:hidden;color:var(--sp-ink);font:500 14px/1.2 var(--sp-body);cursor:pointer;box-shadow:0 10px 30px rgba(40,30,15,.12)}
.sp-pill .sp-lbl{font:500 14px/1.2 var(--sp-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sp-pill svg{flex:none;width:12px;height:12px;stroke:var(--sp-mute);transition:transform .3s var(--sp-ease)}
.sp-pill[aria-expanded="true"] svg{transform:rotate(180deg)}
.sp-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--sp-gold);transform-origin:left;transform:scaleX(0);transition:transform .25s ease-out}
/* the list opens above the pill, centred on the screen */
.sp-list{position:absolute;left:50%;bottom:calc(100% + 10px);width:min(calc(100vw - 32px),480px);max-height:min(62vh,560px);overflow:auto;overscroll-behavior:contain;padding:8px 10px;border-radius:22px;box-shadow:0 18px 50px rgba(40,30,15,.16);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .3s var(--sp-ease),transform .3s var(--sp-ease),visibility 0s linear .3s}
/* nearly opaque so the page text underneath doesn't show through the list */
.sp-list.sp-glass{background:color-mix(in srgb,var(--bg,#F0EBE1) 94%,transparent)}
.sp.is-open .sp-list{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .3s var(--sp-ease),transform .3s var(--sp-ease),visibility 0s}
.sp-list a{min-height:44px;padding:0 8px}
.sp-list .sp-dot{order:-1}
.sp-list .sp-num{min-width:20px}
.sp-list .sp-lbl{font-size:15px}
.sp-list .sp-group{padding:14px 8px 4px 34px}
.sp-list .sp-group:first-child{padding-top:6px}

/* desktop with a mouse: the rail on the right */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
  .sp{left:auto;bottom:auto;right:max(18px,env(safe-area-inset-right,0px));top:50%;transform:translate(10px,-50%);width:auto;max-width:none}
  .sp.is-on{transform:translate(0,-50%)}
  .sp-pill{display:none}
  .sp .sp-list,.sp.is-open .sp-list{position:relative;left:auto;right:auto;bottom:auto;width:auto;max-height:none;overflow:visible;padding:0;border-radius:0;box-shadow:none;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;visibility:inherit;transform:none;isolation:isolate}
  /* the glass panel only appears while the rail is hovered or focused */
  .sp-list::before{content:"";position:absolute;inset:-14px -12px -14px -16px;z-index:-1;border-radius:22px;background:var(--sp-glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--sp-line);opacity:0;transition:opacity .3s var(--sp-ease)}
  .sp ol{display:flex;flex-direction:column;height:min(calc(var(--sp-n,10) * 30px),calc(100vh - 220px))}
  .sp li{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:flex-end}
  .sp li.sp-group{flex:0 0 auto;padding:4px 24px 2px 0;text-align:right}
  .sp a{justify-content:flex-end;padding-left:6px}
  .sp-list .sp-dot{order:0}
  .sp-lbl,.sp-num,.sp-group{opacity:0;transform:translateX(6px);transition:opacity .3s var(--sp-ease),transform .3s var(--sp-ease),color .3s}
  .sp-lbl{max-width:132px;text-align:right}
  .sp-list:hover::before,.sp-list:focus-within::before{opacity:1}
  .sp-list:hover :is(.sp-lbl,.sp-num,.sp-group),.sp-list:focus-within :is(.sp-lbl,.sp-num,.sp-group){opacity:1;transform:none}
  .sp-list:hover a:hover{color:var(--sp-ink)}
}
/* wide screens have room in the margin: always show the section above, the current one and the next */
@media (min-width:1400px) and (hover:hover) and (pointer:fine){
  .sp .is-cur :is(.sp-lbl,.sp-num){opacity:1;transform:none}
  .sp .is-near .sp-lbl{opacity:.8;transform:none}
  .sp .sp-group{opacity:.85;transform:none}
}

@media (prefers-reduced-motion:reduce){.sp,.sp *,.sp *::before{transition:none!important}}
@media print{.sp{display:none}}