/* ============================================================
   The SEO pages (/services/, /about/, /blog/, /privacy/, made by
   domin8te-build/seo/build.py) on top of work.css, plus the
   footer's links and line, which every page carries.
   ============================================================ */

/* ---- the footer: where we work, the email, and the site's pages ---- */
html[data-v="editorial"] .foot__area,
html[data-v="editorial"] .foot__nav{grid-column:1 / -1}
html[data-v="editorial"] .foot__area a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html[data-v="editorial"] .foot__nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none}
html[data-v="editorial"] .foot__nav a{font:500 14px/1.5 var(--f-text);color:var(--ink-2);text-decoration:none}
html[data-v="editorial"] .foot__nav a:hover,
html[data-v="editorial"] .foot__nav a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---- cards that list pages (services, notes) ---- */
html[data-v="editorial"] .seo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-v="editorial"] .cl__name--plain{font:700 clamp(22px,2vw,30px)/1.15 var(--f-display);letter-spacing:-.02em;color:var(--ink);margin:0}
html[data-v="editorial"] .cl__name--plain + .cl__line{margin-top:10px}
html[data-v="editorial"] .cl--text .cl__body{padding-top:clamp(22px,3vw,34px)}
@media (max-width:900px){
  html[data-v="editorial"] .seo-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---- a note's date line ---- */
html[data-v="editorial"] .seo-date{margin:14px 0 0;font:500 14px/1.4 var(--f-text);color:var(--ink-3)}

/* ---- lists and sub-heads inside a chapter ---- */
html[data-v="editorial"] .cs-ch h3{margin:1.6em 0 .5em;font:600 clamp(18px,1.4vw,21px)/1.3 var(--f-text);color:var(--ink)}
html[data-v="editorial"] .cs-list{margin:0 0 1.2em;padding-left:1.2em;max-width:62ch;font:400 clamp(17px,1.25vw,19px)/1.65 var(--f-text);color:var(--ink-2)}
html[data-v="editorial"] .cs-list li{margin:0 0 .4em}
html[data-v="editorial"] .cs-list li::marker{color:var(--acc-display)}
html[data-v="editorial"] .cs-ch a:not(.btn),
html[data-v="editorial"] .faq__a a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html[data-v="editorial"] .cs-ch a:not(.btn):hover,
html[data-v="editorial"] .faq__a a:hover{text-decoration-thickness:2px}

/* ---- questions owners ask: the story page's measure, one hairline each ---- */
html[data-v="editorial"] .faq{padding:clamp(48px,8vh,96px) 0 clamp(12px,2vh,24px)}
html[data-v="editorial"] .faq__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,4vw,64px);align-items:start}
html[data-v="editorial"] .faq__h{margin:0;position:sticky;top:calc(var(--hdr-h) + 36px)}
html[data-v="editorial"] .faq__list{border-top:1px solid rgba(14,20,32,.14)}
html[data-v="editorial"] .faq__q{border-bottom:1px solid rgba(14,20,32,.14)}
html[data-v="editorial"] .faq__q summary{
  list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:20px 2px;font:600 clamp(17px,1.3vw,20px)/1.35 var(--f-text);color:var(--ink)
}
html[data-v="editorial"] .faq__q summary::-webkit-details-marker{display:none}
html[data-v="editorial"] .faq__q summary::after{
  content:"";flex:none;width:11px;height:11px;margin-right:4px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .25s ease
}
html[data-v="editorial"] .faq__q[open] summary::after{transform:translateY(2px) rotate(225deg)}
html[data-v="editorial"] .faq__q summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
html[data-v="editorial"] .faq__a{padding:0 2px 22px;max-width:62ch}
html[data-v="editorial"] .faq__a p{margin:0 0 .8em;font:400 clamp(16px,1.2vw,18px)/1.65 var(--f-text);color:var(--ink-2)}
html[data-v="editorial"] .faq__a p:last-child{margin-bottom:0}
@media (max-width:900px){
  html[data-v="editorial"] .faq__in{grid-template-columns:minmax(0,1fr)}
  html[data-v="editorial"] .faq__h{position:static}
}

/* ---- read next: two pages side by side, the ask across the full width under them ---- */
html[data-v="editorial"] .seo-end{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-v="editorial"] .seo-end .cl--next{grid-column:1 / -1}
@media (max-width:900px){
  html[data-v="editorial"] .seo-end{grid-template-columns:minmax(0,1fr)}
}

/* ---- the closing ask on its own ---- */
html[data-v="editorial"] .seo-solo{display:grid;grid-template-columns:minmax(0,1fr)}
html[data-v="editorial"] .seo-solo .cl--next{max-width:720px}

/* ---- the homepage hero's plain line over the slogan (it carries the page's h1) ---- */
html[data-v="editorial"] .hero__kicker{
  display:inline-flex;align-items:center;gap:12px;margin:0 0 clamp(14px,2.2vh,22px);
  font:600 clamp(12px,.95vw,14px)/1.3 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)
}
html[data-v="editorial"] .hero__kicker::before{content:"";width:34px;height:2px;border-radius:2px;background:var(--acc-display)}

/* ---- the jobs grid on the homepage: each card's way on to its page ---- */
html[data-v="editorial"] .pan__more{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;position:relative;z-index:2;
  font:600 14px/1.3 var(--f-text);color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px
}
html[data-v="editorial"] .pan__more:hover{text-decoration-thickness:2px}
html[data-v="editorial"] .seo-date a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}