/* ── generated content pages ──────────────────────────────────────────────
   Every page under tools/build-seo-pages.py links this instead of carrying
   its own <style>, because there are 146 of them and the block would
   otherwise be copied 146 times into the HTML the browser downloads.
   The article rules are the ones blog.html already had; they live here now
   so the hand-written page and the generated ones cannot drift apart.   */
.page-hero{padding-block:clamp(40px,6vw,74px) clamp(24px,3vw,40px); text-align:center; position:relative; overflow:hidden}
.page-hero h1{font:400 clamp(2.2rem,5.4vw,4rem)/1.05 var(--display); margin:0 0 1rem; letter-spacing:-.03em; text-wrap:balance}
.page-hero .lede{margin-inline:auto}
.page-hero .eyebrow{justify-content:center}
.crumb{font:500 .66rem/1.7 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--dim-2); margin-bottom:1.4rem}
.crumb a:hover{color:var(--pink)}

.article{max-width:760px; margin-inline:auto}
.article .back{display:inline-block; margin-bottom:1.8rem; font:500 .66rem/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim-2)}
.article .back:hover{color:var(--pink)}
.article time{display:block; font:500 .62rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--lav); margin-bottom:.9rem}
.article h1{font:400 clamp(2rem,4.4vw,3.2rem)/1.08 var(--display); margin:0 0 1.6rem; letter-spacing:-.02em; text-wrap:balance}
.article .hero-shot{width:100%; border-radius:20px; margin-bottom:2rem; aspect-ratio:16/9; object-fit:cover;
  box-shadow:0 24px 48px -30px rgba(196,74,134,.9)}

/* the same moving strip the artists page uses, for a page whose cards below
   are all pictures anyway -- it reads as a showreel rather than a hero */
.strip{overflow:hidden; margin:0 0 2rem; padding-block:18px; perspective:900px;
  border-block:1px solid var(--line); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip-track{display:flex; gap:14px; width:max-content; animation:slide 52s linear infinite; transform:rotateX(9deg)}
.strip:hover .strip-track{animation-play-state:paused}
.article .strip figure{flex:0 0 auto; margin:0; width:150px; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  box-shadow:0 16px 34px -22px rgba(196,74,134,.9), inset 0 0 0 1px rgba(255,255,255,.9)}
.article .strip figure img{width:100%; height:100%; object-fit:cover; border-radius:0}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}}
.article h2{font:600 1.12rem/1.4 var(--body); margin:2.2rem 0 .7rem; letter-spacing:-.005em}
.article h3{font:600 .98rem/1.45 var(--body); margin:1.5rem 0 .4rem; color:var(--mist)}
.article p{margin:0 0 1.1rem; color:var(--dim); line-height:1.8}
/* links inherit the body colour by default, which inside prose reads as plain text */
.article p a, .article li a{color:var(--pink); font-weight:500}
.article p a:hover, .article li a:hover{text-decoration:underline}
.article ul{margin:0 0 1.3rem; padding-left:1.1rem; color:var(--dim); line-height:1.8}
.article li{margin-bottom:.4rem}
.article figure{margin:2rem 0}
.article figure img{width:100%; border-radius:18px}

/* the decorator grid: a picture, the name and the way in, as the old site had it */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.1rem; margin:2.2rem 0 2.6rem}
.svc-card{display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:#fff;
  box-shadow:0 16px 34px -26px rgba(196,74,134,.8), inset 0 0 0 1px rgba(226,122,170,.14);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
.svc-card:hover{transform:translateY(-4px); box-shadow:0 26px 44px -26px rgba(255,46,144,.7), inset 0 0 0 1px rgba(255,46,144,.35)}
.svc-card img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--line)}
.svc-card b{padding:.85rem .9rem .1rem; font:600 .88rem/1.35 var(--body); color:var(--mist)}
.svc-card small{padding:.25rem .9rem 0; font:400 .72rem/1.5 var(--body); color:var(--dim)}
.svc-card .btn{margin:auto .9rem 1rem; padding:.6rem 1.1rem; font-size:.78rem}

.article .tail{margin-top:3rem; padding-top:1.8rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between}

/* the video the page carried on the old site. 16/9 box so the iframe cannot
   shift the layout as it loads, and loading=lazy so a page far down the
   article does not pay for the player on first paint.                   */
.vid{margin:2.2rem 0; border-radius:18px; overflow:hidden; aspect-ratio:16/9;
  box-shadow:0 24px 48px -30px rgba(196,74,134,.9)}
.vid iframe{width:100%; height:100%; border:0; display:block}

/* FAQ. <dl> rather than headings, because these are question/answer pairs
   and the FAQPage block in the page's JSON-LD describes them as such.   */
.faq{margin:2.4rem 0 0}
.faq dt{font:600 1rem/1.5 var(--body); margin:1.6rem 0 .5rem}
.faq dd{margin:0; color:var(--dim); line-height:1.8}

/* the directory at sitemap.html: one list per section of the site */
.dirs{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(1.4rem,2.4vw,2.4rem)}
.dir h2{font:400 1.5rem/1.2 var(--display); margin:0 0 .9rem; letter-spacing:-.01em}
.dir ul{margin:0; padding:0; list-style:none}
.dir li{margin-bottom:.45rem; line-height:1.5}
.dir a{color:var(--dim); font-size:.92rem}
.dir a:hover{color:var(--pink)}

/* "more like this": six pages from the same section, written by tools/seo-pass.py */
.article .related{margin:3rem 0 0}
.article .related h2{font:400 1.5rem/1.2 var(--display); margin:0 0 .9rem; letter-spacing:-.01em}
.article .related ul{margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.1rem 1.6rem}
.article .related li{margin-bottom:.45rem; line-height:1.5}
.article .related a{color:var(--dim); font-size:.92rem; font-weight:400}
.article .related a:hover{color:var(--pink); text-decoration:none}

@media (max-width:620px){.article .tail .btn{flex:1 1 100%}}