/* Namely — base layer: tokens, resets, header, footer and components shared by
   every template. Loaded on all pages. */

:root{
  --bg:#FFFBFC; --ink:#3D3A52; --muted:#8B87A3; --card:#FFFFFF;
  --pink:#FF8FAB; --pink-d:#F76690; --sky:#5BB8F0; --sky-d:#2E9BE6; --mint:#5ED8A2; --mint-d:#2FBF87;
  --sun:#FFC94D; --sun-d:#F5B01E; --lav:#B79CED; --lav-d:#9C79E6; --peach:#FFA26B; --peach-d:#F27E3F;
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow-tile:0 14px 34px -20px rgba(61,58,82,.35);
  --shadow-tile-hi:0 24px 44px -22px rgba(61,58,82,.45);
  --radius:22px; --radius-lg:26px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* overflow-x:hidden on the body makes the body itself the scroll container in
   some browsers, which is what lets the page sit shifted sideways under a fixed
   drawer. Clipping does the same job without taking scrolling away, and the
   width is pinned so nothing can push the page wider than the screen. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15.5px;line-height:1.6;
  max-width:100%;overflow-x:clip}
html{overflow-x:clip}
img{max-width:100%;height:auto}
a{color:inherit}
::selection{background:#FFE1EA}

/* The side margin grows with the screen: a fixed 24px reads as nothing on a
   phone, where the cards all but touch the edges. */
.wrap{max-width:1150px;margin:0 auto;padding:0 clamp(20px,6vw,32px)}
.wrap--narrow{max-width:1080px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 14px 0}
.skip:focus{left:0}

/* ---------- motion ---------- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-18px) scale(1.07)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes wob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
/* The letter tiles: an animation replaces whatever transform the hover rule
   sets, so the lift has to live inside the keyframes or it is simply lost. */
@keyframes wob-lift{
  0%,100%{transform:translateY(-6px) rotate(-5deg) scale(1.06)}
  50%    {transform:translateY(-9px) rotate(5deg)  scale(1.09)}
}
@keyframes hue{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes blink{50%{opacity:.25;transform:scale(.7) rotate(20deg)}}
@keyframes letter-drift{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}}
@keyframes grow{from{width:0}}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:rgba(255,251,252,.88);backdrop-filter:blur(14px)}
.site-head__inner{display:flex;align-items:center;gap:22px;height:70px}
.logo{font-weight:800;font-size:23px;letter-spacing:-.03em;display:flex;align-items:center;gap:8px;text-decoration:none}
.logo svg{color:var(--pink-d)}
.logo b{background:linear-gradient(90deg,var(--pink-d),var(--lav-d),var(--sky-d));background-size:200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:hue 5s ease infinite}
.nav{display:flex;align-items:center;gap:4px}
.nav > ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav > ul > li > a{font-weight:600;font-size:14px;color:var(--muted);text-decoration:none;padding:9px 15px;
  border-radius:999px;display:inline-block;transition:background .2s,color .2s,transform .2s}
.nav > ul > li > a:hover,.nav > ul > li > a:focus-visible{color:#fff;background:var(--pink);transform:translateY(-2px)}

/* tools drop-down */
.nav .has-menu{position:relative}
.nav__tools{display:inline-flex}
.nav__toggle{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-weight:600;font-size:14px;
  color:var(--muted);background:none;border:0;cursor:pointer;padding:9px 15px;border-radius:999px;
  transition:background .2s,color .2s,transform .2s}
.nav__toggle:hover,.nav__toggle[aria-expanded="true"]{color:#fff;background:var(--pink);transform:translateY(-2px)}
.nav__chevron{transition:transform .2s}
.nav__toggle[aria-expanded="true"] .nav__chevron{transform:rotate(180deg)}

.nav-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(520px,86vw);
  background:var(--card);border-radius:var(--radius-lg);padding:14px;z-index:60;
  box-shadow:0 26px 54px -24px rgba(61,58,82,.5);animation:rise .22s both}
.nav-menu[hidden]{display:none}
.nav-menu::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;background:var(--card);
  transform:translateX(-50%) rotate(45deg);border-radius:3px}
.nav-menu__list{display:grid;grid-template-columns:1fr 1fr;gap:4px;list-style:none;margin:0;padding:0}
@media(max-width:560px){.nav-menu__list{grid-template-columns:1fr}}
.nav-menu__list a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:16px;text-decoration:none;
  transition:background .15s,transform .15s}
.nav-menu__list a:hover{background:var(--bg);transform:none}
.nav-menu__icon{width:34px;height:34px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--c)}
.nav-menu__name{display:block;font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.nav-menu__blurb{display:block;font-weight:500;font-size:11.5px;color:var(--muted);margin-top:1px}
.nav-menu__all{display:block;text-align:center;margin-top:8px;padding:11px;border-radius:16px;text-decoration:none;
  font-weight:700;font-size:13.5px;color:#fff;background:linear-gradient(120deg,var(--pink-d),var(--lav-d))}
@media(max-width:880px){.nav{display:none}}

/* ---------- mobile drawer ---------- */
.burger{display:none;width:42px;height:42px;flex:none;border:0;cursor:pointer;border-radius:14px;background:var(--card);
  box-shadow:0 8px 20px -12px rgba(61,58,82,.5);padding:0;align-items:center;justify-content:center;
  flex-direction:column;gap:4px}
.burger__bar{display:block;width:18px;height:2.4px;border-radius:99px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] .burger__bar:nth-child(2){transform:translateY(6.4px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar:nth-child(3){opacity:0}
.burger[aria-expanded="true"] .burger__bar:nth-child(4){transform:translateY(-6.4px) rotate(-45deg)}
@media(max-width:880px){
  .burger{display:flex}
  .btn--head{margin-left:auto}
}
/* Below this the logo, the full shortlist label and the burger stop fitting
   side by side, so the row tightens rather than the label being cut. */
@media(max-width:420px){
  .site-head__inner{gap:10px}
  .btn--head{padding:10px 14px;font-size:13px}
  .logo{font-size:20px}
}

.drawer{position:fixed;inset:0;z-index:70}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute;inset:0;border:0;padding:0;background:rgba(61,58,82,.34);
  backdrop-filter:blur(2px);cursor:pointer;animation:rise .2s both}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,88vw);max-width:100vw;background:var(--bg);
  padding:78px 20px 40px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;z-index:1;
  box-shadow:-24px 0 60px -30px rgba(61,58,82,.6);
  animation:drawer-in .24s cubic-bezier(.2,.8,.3,1) both}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}}
.drawer__close{position:absolute;top:18px;right:18px;width:42px;height:42px;border:0;cursor:pointer;border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(120deg,var(--pink-d),var(--lav-d));box-shadow:0 10px 22px -10px var(--pink-d);
  transition:transform .18s}
.drawer__close:hover{transform:rotate(90deg) scale(1.06)}
.drawer__list{list-style:none;margin:0 0 22px;padding:0}
.drawer__list a{display:block;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;padding:11px 0;border-bottom:1px solid rgba(61,58,82,.07)}
.drawer__list a:hover{color:var(--pink-d)}
.drawer__h{font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.drawer__tools{list-style:none;margin:0 0 14px;padding:0}
.drawer__tools a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:16px;text-decoration:none;
  background:var(--card);margin-bottom:6px;box-shadow:0 8px 20px -16px rgba(61,58,82,.5);min-width:0}
/* A long tool name was running past the panel instead of wrapping inside it. */
.drawer__tools a > span:last-child{min-width:0}
.drawer__tools .nav-menu__name,.drawer__tools .nav-menu__blurb{overflow-wrap:anywhere}
body.is-locked{overflow:hidden}


.btn{font-weight:600;font-size:14px;color:#fff;text-decoration:none;border:0;cursor:pointer;font-family:var(--font);
  background:linear-gradient(120deg,var(--pink-d),var(--lav-d));padding:11px 22px;border-radius:999px;
  box-shadow:0 8px 20px -8px var(--pink-d);transition:transform .2s;display:inline-block}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn--head{margin-left:auto;white-space:nowrap}
.btn--saved{background:linear-gradient(120deg,var(--mint-d),var(--sky-d))}

/* ---------- decorative backdrop ---------- */
.cloud{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;
  animation:drift 9s ease-in-out infinite}
.cloud--1{width:420px;height:420px;background:#FFD3E0;top:-140px;left:-100px}
.cloud--2{width:380px;height:380px;background:#CDE8FF;top:-60px;right:-120px;animation-delay:1.4s}
.cloud--3{width:320px;height:320px;background:#E4D9FF;top:340px;left:6%;animation-delay:2.6s;opacity:.4}
/* Floating initials behind the headline. The blink of a star suited a star;
   a letter reads better drifting, so it rises and falls instead. */
.spark{position:absolute;pointer-events:none;font-weight:800;letter-spacing:-.03em;
  animation:letter-drift 6s ease-in-out infinite}
.spark--1{left:12%;top:90px;font-size:30px;color:var(--pink)}
.spark--2{right:14%;top:70px;font-size:24px;animation-delay:.9s;color:var(--sky)}
.spark--3{left:22%;top:330px;font-size:22px;animation-delay:1.7s;color:var(--mint)}
.spark--4{right:20%;top:300px;font-size:28px;animation-delay:.4s;color:var(--lav)}
@media (max-width:700px){.spark{display:none}}

/* ---------- search ---------- */
.search{max-width:600px;margin:0 auto;display:flex;align-items:center;background:var(--card);border-radius:999px;
  padding:8px 8px 8px 26px;box-shadow:0 20px 50px -22px rgba(247,102,144,.5);position:relative}
.search__input{flex:1;border:0;outline:none;height:50px;background:none;font-family:var(--font);font-weight:500;
  font-size:16px;color:var(--ink);min-width:0}
.search__input::placeholder{color:#C9C4DA;font-weight:400}
.search__submit{height:50px;padding:0 28px;border:0;border-radius:999px;font-family:var(--font);font-weight:600;
  font-size:15px;color:#fff;cursor:pointer;background:linear-gradient(120deg,var(--pink-d),var(--lav-d),var(--sky-d));
  background-size:200%;animation:hue 4s linear infinite;transition:transform .15s;white-space:nowrap}
.search__submit:hover{transform:scale(1.05)}
.suggest{position:absolute;top:70px;left:0;right:0;background:#fff;border-radius:var(--radius);overflow:hidden;display:none;
  box-shadow:0 24px 50px -22px rgba(61,58,82,.45);z-index:20;text-align:left}
.suggest.is-open{display:block}
.suggest a{display:flex;justify-content:space-between;align-items:baseline;padding:12px 24px;text-decoration:none;
  font-weight:600;font-size:15px;border-bottom:1px solid #F4F1F7}
.suggest a:last-child{border-bottom:0}
.suggest a:hover{background:#FFF3F7}
.suggest span{font-weight:500;font-size:12.5px;color:var(--muted)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;margin:44px 0 0;transform:rotate(-1.2deg)}
.marquee__track{display:flex;width:max-content;animation:marq 40s linear infinite;gap:14px;padding:6px 0}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee a{font-weight:600;font-size:14.5px;color:#fff;border-radius:14px;padding:10px 18px;white-space:nowrap;text-decoration:none}
.marquee a b{font-weight:500;opacity:.9;margin-left:8px;font-size:12.5px}
.marquee a:nth-child(6n+1){background:var(--pink)}
.marquee a:nth-child(6n+2){background:var(--sky)}
.marquee a:nth-child(6n+3){background:var(--mint)}
.marquee a:nth-child(6n+4){background:var(--sun)}
.marquee a:nth-child(6n+5){background:var(--lav)}
.marquee a:nth-child(6n+6){background:var(--peach)}
.marquee--reverse{transform:rotate(1.2deg);margin-top:10px}
.marquee--reverse .marquee__track{animation-direction:reverse;animation-duration:48s}

/* ---------- sections ---------- */
/* Vertical only. Written as the padding shorthand, this rule also set the left
   and right padding to zero — and since the same element usually carries .wrap
   as well, it quietly cancelled the page's side margin, which is why content sat
   flush against the edge of the screen. */
.section{padding-block:60px}
/* Two sections meeting add their padding together, which made the gap between
   blocks twice the gap at the top of the first one. The second of any pair
   drops its own top padding, so every gap on a page is the same 60px. */
.section + .section{padding-block-start:0}
.section--tight{padding-block-start:10px}
.section--flush{padding-block-start:0}
h1,h2,h3{letter-spacing:-.03em;margin:0}
h2{font-weight:700;font-size:clamp(25px,3.2vw,36px)}
h3{font-weight:700}
.accent{font-style:normal;color:var(--pink-d)}
.gradient-text{background:linear-gradient(90deg,var(--pink-d),var(--sun-d),var(--mint-d),var(--sky-d),var(--lav-d));
  background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hue 6s linear infinite}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.section__more{font-weight:600;font-size:14px;color:var(--sky-d);text-decoration:none}
/* The negative top margin was tuned for a page whose heading sat in a block of
   its own; under the big headings on the matcher and the shelves it pulled the
   paragraph up into the title and the two overlapped. */
.lede{font-weight:500;color:var(--muted);max-width:60ch;margin:12px 0 22px}

/* ---------- name tiles (home + browse) ----------
   Every card-shaped link lifts the same way on hover: up, then a small
   counter-clockwise turn that raises the right corner. The alphabet squares
   take a wider angle because they are small; wide cards use half of it, or the
   far edge travels far enough to look like a glitch. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.tile{position:relative;background:var(--card);border-radius:var(--radius);padding:18px 20px;text-decoration:none;
  box-shadow:var(--shadow-tile);animation:rise .55s both;transition:transform .18s,box-shadow .18s;overflow:hidden;display:block}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px}
.tiles li:nth-child(5n+1) .tile::before{background:var(--pink)}
.tiles li:nth-child(5n+2) .tile::before{background:var(--sky)}
.tiles li:nth-child(5n+3) .tile::before{background:var(--mint)}
.tiles li:nth-child(5n+4) .tile::before{background:var(--sun)}
.tiles li:nth-child(5n+5) .tile::before{background:var(--lav)}
.tile:hover{transform:translateY(-6px) rotate(-2deg) scale(1.02);box-shadow:var(--shadow-tile-hi)}
.tile__name{font-weight:600;font-size:20px;letter-spacing:-.02em;display:block}
.tile__meta{font-weight:500;font-size:12.5px;color:var(--muted);margin-top:3px;display:block}
.tile__save{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:999px;border:0;cursor:pointer;
  padding:0;color:#fff;background:linear-gradient(120deg,var(--pink-d),var(--lav-d));
  transition:transform .15s,background .2s;display:grid;place-items:center}
.tile__save:hover{transform:rotate(90deg) scale(1.12)}
.tile__save.is-saved{background:linear-gradient(120deg,var(--mint-d),var(--sky-d))}
.tile__save .ic{grid-area:1/1;display:block}
.tile__save .ic--check,.tile__save.is-saved .ic--plus{display:none}
.tile__save.is-saved .ic--check{display:block}

/* ---------- tool grid (front page and the tools hub) ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.tool{background:var(--card);border-radius:var(--radius);padding:22px 20px;text-align:center;text-decoration:none;
  display:block;height:100%;box-shadow:var(--shadow-tile);animation:rise .55s both;transition:transform .18s}
.tool:hover{transform:translateY(-6px) rotate(-2deg) scale(1.02)}
.tool__icon{width:52px;height:52px;margin:0 auto 12px;border-radius:18px;display:flex;align-items:center;
  justify-content:center;color:var(--c)}
.tool-grid li:nth-child(6n+1) .tool__icon{background:#FFE1EA}
.tool-grid li:nth-child(6n+2) .tool__icon{background:#E3F3FF}
.tool-grid li:nth-child(6n+3) .tool__icon{background:#E9FCF3}
.tool-grid li:nth-child(6n+4) .tool__icon{background:#FFF3D6}
.tool-grid li:nth-child(6n+5) .tool__icon{background:#F1EAFE}
.tool-grid li:nth-child(6n+6) .tool__icon{background:#FFEDE2}
.tool__name{font-weight:700;font-size:16px;letter-spacing:-.02em;display:block}
.tool__blurb{font-weight:500;font-size:12px;color:var(--muted);margin-top:2px;display:block}


/* ---------- panels, pills, bars ---------- */
.panel{background:var(--card);border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-tile)}
.panel--narrow{max-width:760px}
.note{font-weight:500;font-size:12px;color:var(--muted);margin-top:12px}
/* attribution shown beside the figures it explains, on every page */
.source{font-weight:500;font-size:11.5px;line-height:1.5;color:#A49EB4;margin:14px 0 0;padding-top:12px;
  border-top:1px solid #F2EEF5;max-width:72ch}
.bar{display:flex;height:30px;border-radius:999px;overflow:hidden}
.bar__seg{width:var(--w);background:var(--c);animation:grow 1.1s ease both}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;list-style:none;padding:0}
.legend li{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:12.5px;background:var(--bg);
  border-radius:999px;padding:7px 13px}
.legend i{width:10px;height:10px;border-radius:99px;flex:none;background:var(--c)}

.pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.pills a{display:inline-flex;align-items:baseline;gap:9px;font-weight:700;font-size:15px;color:#fff;border-radius:999px;
  padding:11px 20px;text-decoration:none;animation:pop .5s both;transition:transform .15s}
.pills a:hover{transform:scale(1.09) rotate(-2deg)}
.pills small{font-weight:600;font-size:11.5px;opacity:.9}
.pills li:nth-child(5n+1) a{background:var(--pink-d)}
.pills li:nth-child(5n+2) a{background:var(--sky-d)}
.pills li:nth-child(5n+3) a{background:var(--mint-d)}
.pills li:nth-child(5n+4) a{background:var(--sun-d)}
.pills li:nth-child(5n+5) a{background:var(--lav-d)}

/* ---------- collection mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.mo{border-radius:var(--radius-lg);padding:26px 24px;color:#fff;text-decoration:none;position:relative;overflow:hidden;
  animation:rise .55s both;transition:transform .18s;display:block;height:100%}
.mo:hover{transform:translateY(-6px) rotate(-2deg) scale(1.02)}
.mo__kicker{font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.9;display:block}
.mo__title{font-weight:700;font-size:23px;letter-spacing:-.02em;margin:8px 0 6px;display:block}
.mo__text{font-weight:500;font-size:13.5px;opacity:.94;line-height:1.55;display:block}
.mo::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;
  background:rgba(255,255,255,.22);animation:floaty 4s ease-in-out infinite}
.mo--1{background:linear-gradient(140deg,var(--pink),var(--pink-d))}
.mo--2{background:linear-gradient(140deg,var(--sky),var(--sky-d))}
.mo--3{background:linear-gradient(140deg,var(--mint),var(--mint-d))}
.mo--4{background:linear-gradient(140deg,var(--sun),var(--sun-d))}
.mo--5{background:linear-gradient(140deg,var(--lav),var(--lav-d))}
.mo--6{background:linear-gradient(140deg,var(--peach),var(--peach-d))}

/* ---------- breadcrumbs ---------- */
.crumbs{font-weight:600;font-size:12.5px;color:var(--muted);animation:rise .5s both;list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px}
.crumbs li::after{content:"·";margin-left:6px;color:#D9D3E2}
.crumbs li:last-child::after{content:""}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--pink-d)}

/* ---------- footer ---------- */
.site-foot{margin-top:40px;padding:0 0 60px;background:linear-gradient(180deg,rgba(255,225,234,.35),rgba(227,243,255,.35));
  font-size:14px;color:var(--muted)}
.foot-letters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:30px 0 34px}
.foot-letters a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-weight:700;font-size:14px;color:var(--ink);background:var(--card);border-radius:12px;
  box-shadow:0 8px 20px -14px rgba(61,58,82,.4);transition:transform .15s,background .15s,color .15s}
.foot-letters a:hover{transform:translateY(-4px) rotate(-4deg);background:var(--pink);color:#fff}

.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:26px;
  padding:0 0 30px;text-align:left}
.foot-col__h{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:8px}
.foot-col a{text-decoration:none;font-weight:500;font-size:14px;color:var(--muted);transition:color .15s}
.foot-col a:hover{color:var(--pink-d)}
.foot-col__split{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

.foot-legal{border-top:1px solid rgba(61,58,82,.09);padding-top:22px;text-align:left}
.foot-legal p{margin:0 0 10px;max-width:none;font-size:12.5px;line-height:1.6}
.foot-legal a{color:var(--pink-d);text-decoration:none}
.foot-legal a:hover{text-decoration:underline}
.foot-legal__sources{max-width:100ch}
.foot-legal__bottom{display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:600;padding-top:6px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition:none !important}
}

/* one source block per page, at the end of the content */
.sources{padding-top:10px}
.sources__h{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.sources__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sources__list li{font-weight:500;font-size:12.5px;line-height:1.6;color:var(--muted);padding-left:16px;position:relative;max-width:88ch}
.sources__list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:99px;background:var(--pink)}
.sources__list li:nth-child(2)::before{background:var(--sky)}
.sources__list li:nth-child(3)::before{background:var(--mint)}
.sources__note{font-weight:500;font-size:12.5px;color:var(--muted);margin:14px 0 0;padding-top:12px;border-top:1px solid #F2EEF5;max-width:88ch}

/* ---------- shortlist panel ---------- */
.shortlist{position:fixed;inset:0;z-index:80}
.shortlist[hidden]{display:none}
.shortlist__panel{position:absolute;top:0;right:0;bottom:0;width:min(380px,90vw);background:var(--bg);z-index:1;
  padding:22px 20px 20px;overflow-y:auto;box-shadow:-24px 0 60px -30px rgba(61,58,82,.6);
  animation:drawer-in .24s cubic-bezier(.2,.8,.3,1) both;display:flex;flex-direction:column}
.shortlist__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.shortlist__title{font-weight:800;font-size:22px;letter-spacing:-.03em;margin:0}
.shortlist__close{width:38px;height:38px;flex:none;border:0;cursor:pointer;border-radius:13px;display:flex;
  align-items:center;justify-content:center;color:#fff;background:linear-gradient(120deg,var(--pink-d),var(--lav-d));
  transition:transform .18s}
.shortlist__close:hover{transform:rotate(90deg) scale(1.06)}
.shortlist__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.shortlist__list li{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:16px;
  padding:4px 6px 4px 16px;box-shadow:0 10px 24px -20px rgba(61,58,82,.5);position:relative;overflow:hidden}
.shortlist__list li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.shortlist__list li:nth-child(5n+1)::before{background:var(--pink)}
.shortlist__list li:nth-child(5n+2)::before{background:var(--sky)}
.shortlist__list li:nth-child(5n+3)::before{background:var(--mint)}
.shortlist__list li:nth-child(5n+4)::before{background:var(--sun)}
.shortlist__list li:nth-child(5n+5)::before{background:var(--lav)}
.shortlist__name{flex:1;font-weight:700;font-size:16.5px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
  padding:10px 0}
a.shortlist__name:hover{color:var(--pink-d)}
.shortlist__drop{width:32px;height:32px;flex:none;border:0;cursor:pointer;border-radius:11px;background:var(--bg);
  color:var(--muted);font-size:19px;line-height:1;transition:background .15s,color .15s}
.shortlist__drop:hover{background:#FFE1EA;color:var(--pink-d)}
.shortlist__empty{font-weight:500;font-size:14px;color:var(--muted);line-height:1.6;margin:0}
.shortlist__foot{margin-top:auto;padding-top:18px}
.shortlist__note{font-weight:500;font-size:12px;color:var(--muted);margin:0 0 12px}
.shortlist__clear{width:100%;height:44px;border:0;border-radius:999px;cursor:pointer;font-family:var(--font);
  font-weight:700;font-size:14px;color:var(--pink-d);background:#FFE1EA;transition:transform .15s}
.shortlist__clear:hover{transform:translateY(-2px)}

/* ---------- hover ----------
   A page of figures can look like a printout. These are the smallest moves
   that tell the reader an element answers to them: a card lifts, a pill
   brightens, a row lights up, a link draws its own underline. Anyone who has
   asked their system to cut animation gets none of it. */
.pills a{transition:transform .15s cubic-bezier(.2,.7,.3,1),filter .15s,box-shadow .15s}
.pills a:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.08);
  box-shadow:0 8px 18px rgba(40,30,70,.16)}

/* A link that draws its underline on approach rather than carrying one. */
.note a,.sources a,.origin__line a{text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .2s}
.note a:hover,.sources a:hover,.origin__line a:hover{background-size:100% 1.5px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* The 404. The number says what happened before the sentence explains it, and
   it is marked aria-hidden because a screen reader gets the same news from the
   heading underneath without having to hear three digits first. */
/* The 404 sits in the middle of the screen rather than at the top of a long
   empty page: there is nothing below it to scroll to. */
.lost-wrap{display:grid;place-items:center;min-height:calc(100vh - 260px)}
/* Centred on its own, not only inside the 404 template's grid: the same card is
   printed by the fallback template, where the wrapper is a plain block. */
.lost{width:100%;max-width:640px;margin-inline:auto;text-align:center}
/* Inside prose, links are pink — which on a pink button left the label invisible. */
.prose__body a.btn{color:#fff}
.lost__code{margin:0;font-weight:800;font-size:clamp(84px,16vw,132px);line-height:1;
  letter-spacing:-.04em;background:linear-gradient(120deg,var(--pink-d),var(--lav-d),var(--sky-d));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lost h1{margin:10px 0 0}
.lost .prose__body{max-width:48ch;margin:0 auto}
@media (max-width:560px){
  .lost-wrap{min-height:calc(100vh - 200px);padding-left:16px;padding-right:16px}
  .lost{padding:26px 18px}
}