/* Drone links: fibre vs free-space optical, after the London map. */
.spektrum-drone-links{scroll-margin-top:var(--nav-h,69px)}
.drone-links-copy>p{font-size:clamp(1rem,1.25vw,1.2rem);color:#51575e;line-height:1.65;max-width:46ch;margin:0}
.drone-links-copy>p+p{margin-top:1em}
.drone-links-copy>.drone-links-mechanism{font-size:.8rem;margin-bottom:1.1rem;color:#626971}
.drone-links-copy sup{margin-left:.15em;font-size:.65em;line-height:0}
.drone-links-copy sup a{color:inherit;text-decoration:none;padding:.15em}
.drone-links-copy .spektrum-sources{margin-top:clamp(1.2rem,2vw,2rem);font-size:.68rem}
.drone-links-copy .spektrum-sources li{scroll-margin-top:calc(var(--nav-h,69px) + 1rem)}
.spektrum-drone-links figcaption a{color:inherit;text-decoration:none}
.spektrum-drone-links figcaption a:hover{text-decoration:underline}
/* Wide crop shown at its own proportions, centred in the one-screen section like the other figures on this page. */
@media(min-width:850.02px){.tl-page .spektrum-drone-links figure{height:auto;align-self:center}.tl-page .spektrum-drone-links img{height:auto;aspect-ratio:1500/780}}
@media(max-width:850px){.spektrum-drone-links img{aspect-ratio:1500/780}}

/* Both configurations share the same photographic crop and camera. */
.tl-page #drone-links .drone-figure{height:auto;align-self:center;display:block;min-width:0}
.drone-stage{--drone-fade:1800ms;position:relative;isolation:isolate;width:100%;aspect-ratio:4/3;overflow:hidden;background:#e3e3da}
.drone-view{position:absolute;inset:0;background:#62635c url('./assets/photo-background-matched.png') 69.565217% center/144.23077% 100% no-repeat;transition:opacity var(--drone-fade) cubic-bezier(.45,0,.55,1);pointer-events:none}
.drone-view--fibre{z-index:1}
.drone-view--optical{z-index:2;opacity:0}
.drone-stage[data-mode=optical] .drone-view--optical{opacity:1}
.tl-page #drone-links .drone-stage img{position:absolute;top:0;left:-30.76923%;width:144.23077%;max-width:none;height:100%;aspect-ratio:auto;object-fit:fill;user-select:none}
.drone-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.drone-callouts{color:rgba(205,217,207,.58)}
.drone-callouts path{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.drone-annotation{position:absolute;transform:translateY(-50%);color:#edf1e7;font:400 clamp(.66rem,.85vw,.78rem)/1.4 var(--font-body,Inter,sans-serif);white-space:nowrap;padding:3px 5px;background:#242d2473;text-shadow:0 1px 5px #20271ed9}
.drone-controls{position:absolute;top:clamp(10px,2.5%,18px);left:clamp(10px,2.5%,18px);z-index:4;display:inline-flex;gap:3px;padding:4px;border:0;border-radius:999px;background:#eeede894;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:none}
.drone-controls[hidden]{display:none}
.drone-controls button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:#2d4037;font:500 .75rem/1.3 var(--font-body,Inter,sans-serif);cursor:pointer;transition:background-color 650ms ease-in-out,color 650ms ease-in-out}
.drone-controls button[aria-pressed=true]{background:#326d61c7;color:#fff}
.drone-controls button:not([aria-pressed=true]):hover{background:#edf1e733}
.drone-controls button:focus-visible{outline:2px solid #172e26;outline-offset:2px}
.drone-controls button:disabled{opacity:.5;cursor:default}
.tl-page #drone-links .drone-figure figcaption{position:static;left:auto;bottom:auto;padding-top:12px;color:#666e77;text-shadow:none;font-size:.61rem;letter-spacing:0;line-height:1.6}
.drone-credit{display:block;max-width:80ch}
@media(max-width:850px){.tl-page #drone-links .drone-figure{width:100%}.drone-controls button{min-height:32px;padding:0 4px;font-size:.7rem}.drone-annotation{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.drone-view,.drone-controls button{transition:none}}

