/* Reading pages (blog posts, case studies, privacy, terms) on the current design system.
   system.css gives the ground, the bar, the HUD and the footer; article.css / case.css keep the reading layout;
   this file bridges the two: the tokens those files expect, and type in the site's own voice. */
:root{--teal-dark:#0C726D;--font:var(--body);--maxw:1180px;--serif:var(--accent)}
body.reading,body.cs{background:var(--bone);color:var(--ink)}
html:has(body.reading),html:has(body.cs){background:var(--bone)}

/* headings: Space Grotesk, uppercase, regular weight — the same voice as every other page */
.art-head h1{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.035em;line-height:.96;font-size:clamp(2.3rem,5.6vw,4.4rem)}
.art-body h2,.faq h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.art-related h3,.art-cta h3{font-family:var(--display);font-weight:400;text-transform:uppercase}
.art-related a{font-weight:400;text-transform:uppercase;font-size:1.05rem}
.art-cat{font-family:var(--display);font-weight:500}
.crumbs,.art-meta{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}
.art{padding-top:clamp(110px,14vw,170px)}
.art-body p,.art-body li{color:#2b3432}
.art-hero{border-radius:.93vw;background:var(--ink)}
@media (max-width:640px){.art-hero{border-radius:12px}}

/* colour moments: studio teal, the same as the service pages */
.art-cat{background:rgba(25,184,176,.14);color:var(--teal-deep)}
.art-body blockquote{border-left-color:var(--teal)}
.key-answer{background:var(--ink);border-radius:14px}
.art-cta{background:var(--teal-deep);border-radius:.93vw}
@media (max-width:640px){.art-cta{border-radius:14px}}
.art-author{background:#e9e8e2}

/* buttons */
.btn-primary{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.7em;border-radius:999px;border:1px solid var(--teal-deep);
  background:var(--teal-deep);color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.art-cta .btn-primary{background:#fff;border-color:#fff;color:var(--teal-deep)}
.art-cta .btn-primary:hover{background:var(--ink);border-color:var(--ink);color:#fff}


.legal-note{background:rgba(25,184,176,.08);border:1px dashed var(--teal);border-radius:10px;padding:14px 18px;margin:0 0 28px;font-size:15px;line-height:1.55;color:#2b3432}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:300;background:var(--ink);color:var(--bone);padding:.6em 1em;border-radius:6px}

/* 404 */
.e404{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:140px var(--pad) 80px}
.e404 .num{font-family:var(--display);font-weight:400;font-size:clamp(7rem,26vw,22rem);line-height:.8;letter-spacing:-.06em;color:var(--ink);margin:0}
.e404 .num i{font-family:var(--accent);color:var(--teal-deep);letter-spacing:-.02em}
.e404 h1{color:var(--ink);font-style:normal;mix-blend-mode:normal;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,2.8rem);margin:2rem 0 .6rem}
.e404 p{max-width:46ch;color:var(--muted);font-size:1.05rem;margin:0 0 2rem}
.e404 .ir{display:flex;flex-wrap:wrap;gap:.8rem}