/* La Scala on the home page: ruler, level card and progress dock. Satin glass only where it carries information. */
:root{--glass:#0d0a1766;--glass-edge:#ffffff1c;--glass-hi:#ffffff26;--rung-gap:2px}
.glass,.dock,.scala-rungs{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 50px -24px #000a;border-radius:18px}

.rail{display:none}
.scala{position:fixed;z-index:21;right:clamp(10px,1.6vw,26px);top:50%;translate:0 -50%;pointer-events:none}
.scala-rungs{list-style:none;margin:0;padding:8px 22px 8px 6px;display:grid;gap:var(--rung-gap);position:relative;background:#0d0a17b3;border-radius:16px}
.scala-rungs::after{content:'';position:absolute;right:10px;top:20px;bottom:20px;width:3px;border-radius:3px;background:#ffffff1f}
.rung{pointer-events:auto;position:relative;display:grid;grid-template-columns:auto auto;justify-content:end;align-items:baseline;gap:10px;padding:9px 6px 9px 10px;border-radius:10px;text-decoration:none;
  font:500 14px/1 var(--sans);color:var(--faint);text-shadow:var(--halo);transition:color .35s,background .35s}
.rung i{position:absolute;right:-16px;top:50%;width:9px;height:9px;margin-top:-4.5px;margin-right:-3px;border-radius:50%;background:#6f6580;transition:scale .5s var(--ease),background .35s}
.rung:hover{color:var(--ink);background:#ffffff0d}
.rung-n{font-variant-numeric:tabular-nums;font-size:13px;opacity:0;translate:6px 0;transition:opacity .35s,translate .5s var(--ease)}
.scala:hover .rung-n,.rung[aria-current] .rung-n,.rung:focus-visible .rung-n{opacity:.85;translate:0 0}
.rung.is-past{color:#d9c3a6}.rung.is-past i{background:var(--amber);opacity:.55}
.rung[aria-current]{color:var(--ink)}.rung[aria-current] i{background:var(--amber);scale:1.7;opacity:1;box-shadow:0 0 0 5px #ffb87730,0 0 18px 4px #ffb87766}
.scala-axis{position:absolute;right:calc(100% + 6px);top:50%;translate:0 -50%;display:none}

.dock{position:fixed;z-index:30;top:12px;right:calc(clamp(18px,3vw,40px) + 112px);width:max-content;max-width:calc(100vw - 460px);padding:0;border-radius:22px}
.dock-pill{display:flex;align-items:center;gap:16px;padding:12px 16px 12px 18px;border:0;background:none;color:var(--muted);font:400 14px/1 var(--sans);cursor:pointer;white-space:nowrap;border-radius:22px}
.dock-pill b{font:400 20px/1 var(--serif);color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
.dock-pill i{width:8px;height:8px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);rotate:45deg;translate:0 -2px;transition:rotate .4s var(--ease)}
.dock.is-open .dock-pill i{rotate:225deg;translate:0 2px}
.dock-more{max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .5s var(--ease),opacity .4s}
.dock.is-open .dock-more{max-height:440px;opacity:1;pointer-events:auto;padding-bottom:16px}
.dock-level{margin:4px 18px 10px;display:grid;gap:4px}.dl-step{font:500 13px/1.3 var(--sans);color:var(--amber)}.dl-count{font:400 14px/1.3 var(--sans);color:var(--muted)}.dl-count b{font:400 30px/1 var(--serif);color:var(--ink);margin-right:6px;font-variant-numeric:tabular-nums}
.dock-title{margin:0 18px 8px;font:500 13px/1 var(--sans);color:var(--faint)}
.dock-ladder{display:flex;gap:3px;height:8px;margin:0 18px;border-radius:6px;overflow:hidden}
.rl{display:block;background:#ffffff2e}.rl--demo{background:#6f6580}.rl--scenario{background:#8e7ab8}.rl--estimated{background:#d9a56a}.rl--observed{background:var(--amber)}
.dock-legend{margin:8px 18px 0;display:flex;flex-wrap:wrap;gap:4px 12px;font:400 12.5px/1.3 var(--sans);color:var(--faint)}
.dock-legend span{display:inline-flex;align-items:center;gap:5px}.k{display:inline-block;width:8px;height:8px;border-radius:2px}
.k--demo{background:#6f6580}.k--scenario{background:#8e7ab8}.k--estimated{background:#d9a56a}.k--observed{background:var(--amber)}
.dock-fine{margin:10px 18px 0;font:400 12.5px/1.4 var(--sans);color:var(--faint);max-width:340px}
.dock-link{display:inline-block;margin:12px 18px 0;font:500 14px/1 var(--sans);color:var(--bg);background:var(--amber);padding:10px 15px;border-radius:999px;text-decoration:none;transition:scale .3s var(--ease),filter .3s}
.dock-link:hover{scale:1.04;filter:brightness(1.08)}.dock-link:active{scale:.97}
.scroll-hint{right:auto!important;left:50%;translate:-50% 0}

/* satin sheets for the copy: they arrive with the chapter, they leave with it */
html:not(.is-mobile) :is(.copy--top,.copy--center,.copy.copy--bottom){width:min(780px,92vw)}
html:not(.is-mobile) .copy:not(.copy--hero){opacity:0;padding:clamp(18px,2.2vw,32px) clamp(20px,2.6vw,38px);border-radius:24px;border:1px solid transparent;
  background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:opacity .35s,background .9s var(--ease),backdrop-filter .9s var(--ease),-webkit-backdrop-filter .9s var(--ease),border-color .9s,box-shadow .9s}
html:not(.is-mobile) .is-active .copy:not(.copy--hero){opacity:1;transition:opacity .6s .15s,background .9s var(--ease),backdrop-filter .9s var(--ease),-webkit-backdrop-filter .9s var(--ease),border-color .9s,box-shadow .9s;background:#0b0815;background:color-mix(in srgb,#0b0815 46%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 70px -30px #000b}
.chapter--archive .copy{background:none!important;backdrop-filter:none!important;border-color:transparent!important;box-shadow:none!important}

@media (max-width:1180px){
  .dock{top:auto;right:12px;left:12px;width:auto;max-width:none;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .dock-pill{justify-content:space-between;gap:10px;padding:11px 14px;font-size:12.5px}.dock-pill b{font-size:17px}.dock-pill span:nth-child(3){display:none}
  .dock-more{position:absolute;left:0;right:0;bottom:100%;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);border:1px solid var(--edge);border-radius:18px;margin-bottom:8px}
  .dock.is-open .dock-more{padding-top:14px}
}
@media (max-width:760px),(pointer:coarse) and (max-width:1100px){.scala{display:none}}
@media (prefers-reduced-motion:reduce){.rung,.rung i,.dock-more,.copy{transition:none!important}}

/* the header carries the work's state: the chapter's own heading is the title, so the small centre label gives way */
@media (min-width:1181px){.now{visibility:hidden}.archive{right:128px}}
.top{pointer-events:none}.top>*{pointer-events:auto}

/* phones: the progress bar lives at the foot, so every sheet keeps clear of it */
html.is-mobile .copy{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
html.is-mobile .chapter--projects .copy--top{padding-bottom:40px}

/* The chapter panel's light: one comet round the 1px edge, then into the title, then a resting hairline. Once per entrance, never a loop.
   The comet is a rotating layer behind a 1px mask: transform and opacity only, because repainting a border over the panel's blur drops frames. */
.copy>i.edge{display:none}
html:not(.is-mobile) .copy>i.edge{display:block;position:absolute;inset:-1px;z-index:1;overflow:hidden;border-radius:24px;padding:1px;pointer-events:none;translate:none;opacity:0;transition:opacity .5s;
  background:linear-gradient(120deg,#ffb26b59,#8b5cf633 55%,#ffb26b26);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html:not(.is-mobile) .is-active .copy>i.edge{opacity:1;translate:none}
.chapter--archive .copy>i.edge{display:none!important}
.edge b{position:absolute;left:50%;top:50%;width:125%;aspect-ratio:1;opacity:0;transform:translate(-50%,-50%);background:conic-gradient(#0000 0 60%,#8b5cf6 74%,#ffb26b 86%,#fff0de 88%,#0000 89%)}
@keyframes sh-edge{0%{transform:translate(-50%,-50%) rotate(0deg);opacity:0}10%,86%{opacity:1}100%{transform:translate(-50%,-50%) rotate(360deg);opacity:0}}
@keyframes sh-title{0%,100%{color:inherit}38%{color:#ffc48c}68%{color:#c4adff}}
@media (prefers-reduced-motion:no-preference){
  html:not(.is-mobile) .is-active .edge b{animation:sh-edge 2.6s cubic-bezier(.45,.05,.4,.95) .55s both}
  .is-active .copy:not(.copy--hero) [data-split] .c{animation:sh-title 1.15s ease-in-out both;animation-delay:calc(2.75s + var(--i) * 24ms)}
  html.is-mobile .is-active .copy:not(.copy--hero) [data-split] .c{animation-delay:calc(.9s + var(--i) * 24ms)}
}