/* ==========================================================================
   The Boardroom Edit: warm city theme (Canary Wharf at golden hour / dusk)
   --------------------------------------------------------------------------
   Toggle: delete the <link> to this file (or set CITY = False in tools/build.py
   and rebuild). Without this file every .city-art element stays hidden
   (site.css) and the site falls back to the plain framework.
   Art: original, hand-built inline SVG (tools/skyline.py). No text sits on the
   art, so all text contrast is unchanged from the framework (WCAG AA).
   ========================================================================== */
:root{
  --city-sky-top:#fcf6ee;
  --city-sky-mid:#f9e6cf;
  --city-sky-low:#f4cfa8;
  --city-sun:rgba(255,204,140,.9);
  --city-rose:rgba(236,160,120,.35);
  --city-cloud:rgba(255,250,242,.7);
  --city-ink-warm:rgba(122,70,50,.28);
}
html{overflow-x:clip}

/* ---- Sky + skyline scene behind hero panels ------------------------------ */
.city-scene{
  position:relative;isolation:isolate;
  margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
  margin-top:calc(-1 * var(--s-6));padding-top:clamp(1rem,3vw,2.25rem);
  margin-bottom:var(--s-7);
  background:
    radial-gradient(ellipse 55% 60% at 24% 100%,var(--city-sun),transparent 72%),
    radial-gradient(ellipse 45% 40% at 82% 96%,var(--city-rose),transparent 70%),
    radial-gradient(ellipse 28% 7% at 72% 20%,var(--city-cloud),transparent 72%),
    radial-gradient(ellipse 22% 5% at 16% 34%,var(--city-cloud),transparent 72%),
    linear-gradient(180deg,var(--city-sky-top) 0%,var(--city-sky-mid) 48%,var(--city-sky-low) 100%);
}
/* soft hand-off from the dock water into the page */
.city-scene::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:22px;z-index:1;
  background:linear-gradient(180deg,rgba(247,243,236,0),var(--c-paper));pointer-events:none}
.city-scene .page-header{position:relative;z-index:2;margin-top:0;
  border:1px solid rgba(160,82,45,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 28px 60px -34px var(--city-ink-warm),0 6px 18px -12px var(--city-ink-warm)}
.city-skyline{position:absolute;left:0;bottom:0;width:100%;z-index:0;pointer-events:none;display:block}
.city-skyline--narrow{display:none}

/* Home: tall scene, skyline rising behind the panel */
.city-scene--home{padding-bottom:clamp(170px,17vw,250px)}
/* low golden sun, sitting just above the dock on the west side */
.city-scene--home::before{content:"";position:absolute;z-index:0;left:13%;bottom:clamp(110px,11.5vw,165px);width:clamp(90px,10vw,140px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#ffe2ad 0 42%,rgba(255,214,150,.55) 58%,rgba(255,206,140,0) 72%);pointer-events:none}
.city-scene--home .city-skyline--wide{height:clamp(300px,30vw,440px)}

/* Other pages: shorter scene, smaller skyline cropped so One Canada Square sits clear of the panel */
.city-scene--page{padding-bottom:clamp(84px,8.5vw,128px)}
.city-scene--page .city-skyline--wide{height:auto;aspect-ratio:1400/366;width:min(100%,1560px);left:50%;transform:translateX(-50%)}

@media (min-width:1700px){
  .city-skyline--wide{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
}

/* ---- Skyline layers --------------------------------------------------------- */
.cw-tw{animation:cw-twinkle 9s ease-in-out infinite}
.cw-t1{animation-duration:11s;animation-delay:-3s}
.cw-t2{animation-duration:13s;animation-delay:-7s}
.cw-t3{animation-duration:8s;animation-delay:-5s}
.cw-beacon{animation:cw-beacon 3.6s ease-in-out infinite}
@keyframes cw-twinkle{0%,100%{opacity:1}42%{opacity:1}50%{opacity:.25}58%{opacity:.9}}
@keyframes cw-beacon{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .cw-tw,.cw-beacon{animation:none!important}
}

/* ---- Thin skyline silhouette divider (home) ----------------------------------- */
.city-divider{display:flex;align-items:flex-end;gap:14px;max-width:var(--w-text,640px);margin:var(--s-7) auto var(--s-6);color:var(--c-clay)}
.city-divider::before,.city-divider::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4;margin-bottom:.5px}
.city-divider svg{display:block;width:240px;height:18px;flex:none;opacity:.9}

/* ---- Faded skyline strip above the footer (every page) ------------------------ */
.city-footer-strip{display:block;position:relative;height:clamp(78px,13vw,170px);margin-top:calc(-1 * var(--s-6));overflow:hidden;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%);mask-image:linear-gradient(180deg,transparent 0%,#000 45%)}
.city-footer-strip svg{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,920px);height:100%;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.city-footer-strip .cw-lit{opacity:.6}

/* ---- Pexels skyline photo, reused lower on the home page as a warm band ------- */
.nlp-band--skyline{position:relative}
.nlp-band--skyline::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(252,236,214,.18),rgba(214,128,72,.22));mix-blend-mode:soft-light}

/* ---- Small screens: simplified skyline -------------------------------------- */
@media (max-width:640px){
  .city-skyline--wide{display:none}
  .city-skyline--narrow{display:block}
  .city-scene--home{padding-bottom:150px}
  .city-scene--home .city-skyline--narrow{height:250px}
  .city-scene--page{padding-bottom:72px}
  .city-scene--page .city-skyline--narrow{height:160px}
  .cw-far,.cw-haze,.cw-mid-win,.cw-grid-win,.cw-shimmer{display:none}
  .cw-t2,.cw-t3{animation:none}
  .city-divider svg{width:140px;height:11px}
}