/* Polish layer: the finishing every family homepage shares (data/inspiration.md, "Polish layer").
   Load after base.css and before the page's style.css, so a family can still override any of it:
     <link rel="stylesheet" href="../../vendor/lenis/lenis.css">
     <link rel="stylesheet" href="../../heroes/_base/base.css">
     <link rel="stylesheet" href="../../heroes/_base/polish.css">
   and set the family on the root: <html lang="en-GB" data-family="editorial">.
   Colours only from the base tokens. Everything here reads fine with no JavaScript. */

:root{
  --p-ease:cubic-bezier(.215,.61,.355,1);          /* power3.out */
  --p-ease-io:cubic-bezier(.65,0,.35,1);           /* power3.inOut */
  --btn-radius:var(--radius);
  --p-hdr-bg:var(--ground); --p-hdr-fg:var(--ink);  /* the header once it turns solid */
  --p-hdr-btn-bg:var(--brand); --p-hdr-btn-fg:var(--on-dark);
  --p-menu-bg:var(--deep); --p-menu-fg:var(--on-dark);
  --p-hdr-on:0px;                                   /* header height while it is showing; sticky bars sit under it */
}
/* radius per family: square for the precise ones, pills allowed in soft */
[data-family="editorial"],[data-family="immersive"],[data-family="bold"]{--btn-radius:0px}
[data-family="grid"]{--btn-radius:2px}
[data-family="showcase"]{--btn-radius:4px}
[data-family="soft"]{--btn-radius:999px;--p-menu-bg:var(--tint);--p-menu-fg:var(--ink)}
[data-family="immersive"]{--p-menu-bg:var(--night)}
[data-family="grid"]{--p-menu-bg:var(--night)}

/* ---------- 1. smooth scroll: Lenis drives the native scroll, so pins, sticky and find in page still work ---------- */
html.lenis{scroll-behavior:auto}

/* ---------- 2. header: transparent over the hero, hides going down, returns solid going up ---------- */
html.p-hf .nav[data-p-header]{position:fixed;top:0;left:0;right:0;z-index:60;transition:background-color .35s var(--p-ease),color .35s var(--p-ease)}
.nav[data-p-header].is-solid{background:var(--p-hdr-bg);color:var(--p-hdr-fg)}
.nav[data-p-header].is-solid .btn--light{background:var(--p-hdr-btn-bg);color:var(--p-hdr-btn-fg)}
/* a bigger tap target for the menu button without moving its two lines */
.nav__menu{box-sizing:content-box;border:15px solid transparent;margin:-15px;background-clip:padding-box}

/* ---------- 3. full-screen menu (built by polish.js from the header's own links) ---------- */
.p-menu{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--p-menu-bg);color:var(--p-menu-fg);overflow-y:auto;overscroll-behavior:contain}
.p-menu[hidden]{display:none}
.p-menu__top{flex:none;width:var(--wrap);margin-inline:auto;height:72px;display:flex;align-items:center;justify-content:space-between}
.p-menu__top .nav__logo svg{width:112px;height:30px}
.p-menu__close{position:relative;width:28px;height:28px;margin-right:-6px}
.p-menu__close::before,.p-menu__close::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.p-menu__close::after{transform:rotate(-45deg)}
.p-menu__close{box-sizing:content-box;border:10px solid transparent;margin:-10px -16px -10px -10px;background-clip:padding-box}
.p-menu__list{flex:1;list-style:none;width:var(--wrap);margin-inline:auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1.4vh,12px);padding:24px 0}
.p-menu__mask{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.p-menu__link{display:block;font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--track);font-size:clamp(42px,12vw,76px);line-height:1.06}
.p-menu__foot{flex:none;width:var(--wrap);margin-inline:auto;padding:0 0 clamp(28px,6vh,48px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:15px}
.p-menu__foot p,.p-menu__foot .p-menu__mail{opacity:.72;color:inherit}
.p-menu .btn{background:var(--p-menu-fg);color:var(--p-menu-bg)}
html.p-lock,html.p-lock body{overflow:hidden}

/* ---------- 4. buttons: label roll + fill sweep; links: a drawn underline ---------- */
.btn,.pill{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--btn-radius);--p-fill:var(--night)}
.btn--light,.pill:not(.pill--dark){--p-fill:var(--tint)}
.btn::before,.pill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--p-fill);transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--p-ease-io)}
.p-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;margin:-.2em 0}
.p-roll__a,.p-roll__b{display:block;padding:.2em 0;transition:transform .45s var(--p-ease)}
.p-roll__b{position:absolute;left:0;top:0;width:100%;transform:translateY(100%)}
.btn svg,.pill svg{flex:none;transition:transform .45s var(--p-ease)}
@media (hover:hover){
  .btn:hover::before,.pill:hover::before{transform:scaleX(1);transform-origin:0 50%}
  .btn:hover .p-roll__a,.pill:hover .p-roll__a{transform:translateY(-100%)}
  .btn:hover .p-roll__b,.pill:hover .p-roll__b{transform:translateY(0)}
  .btn:hover svg,.pill:hover svg{transform:translateX(4px)}
}
.btn:focus-visible .p-roll__a,.pill:focus-visible .p-roll__a{transform:translateY(-100%)}
.btn:focus-visible .p-roll__b,.pill:focus-visible .p-roll__b{transform:translateY(0)}

.link{position:relative;border-bottom:0;padding-bottom:3px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:100% 50%}
@media (hover:hover){.link:hover::after{animation:p-line .8s var(--p-ease-io)}}
.link:focus-visible::after{animation:p-line .8s var(--p-ease-io)}
@keyframes p-line{
  0%{transform:scaleX(1);transform-origin:100% 50%}
  45%{transform:scaleX(0);transform-origin:100% 50%}
  55%{transform:scaleX(0);transform-origin:0 50%}
  100%{transform:scaleX(1);transform-origin:0 50%}
}

/* ---------- 5. label cursor over media only; the system cursor always stays ---------- */
.p-cursor{position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--on-dark);font-size:15px;line-height:1;opacity:0;transform:scale(.2);will-change:transform}
.p-cursor.is-light{background:var(--ground);color:var(--ink)}
.p-cursor span{display:block}

/* ---------- 6. image loading: no half-painted pictures, a missing one is a plain ground ---------- */
img.p-wait{opacity:0}
img.p-in{transition:opacity .6s var(--p-ease)}
img.p-missing{visibility:hidden}
.p-ground{background-color:var(--tint)}

/* ---------- 7. page transitions between documents (ignored where unsupported, harmless on file://) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:p-vt-out .22s ease-in both}
::view-transition-new(root){animation:p-vt-in .5s var(--p-ease) both}
@keyframes p-vt-out{to{opacity:0}}
@keyframes p-vt-in{from{opacity:0;transform:translateY(20px)}}

@media (prefers-reduced-motion:reduce){
  .p-roll__a,.p-roll__b,.btn::before,.pill::before,.btn svg,.pill svg,img.p-in{transition:none}
  .link:hover::after,.link:focus-visible::after{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}