/* =====================================================================
   ATELIER — IMAGE LAYER  (v2.73.0)
   Real photography integrated into the existing atelier architecture.
   Placement is CSS-driven over existing hooks (.page-hero, .at-dark),
   plus one homepage founder figure (front-atelier.php). Palette, forms,
   schema, links and every other skin are untouched. Loads only under the
   Atelier skin, after atelier-skin.css.
   Images: assets/img/atelier/*.jpg  (progressive, ~1600px, warm ivory/
   champagne/ink — no text, no people, no logos).
   ===================================================================== */

/* ---- inner-page hero: a photograph dissolving in from the right -------- */
body.skin-atelier .page-hero{position:relative;overflow:hidden}
body.skin-atelier .page-hero > .wrap{position:relative;z-index:2}
body.skin-atelier .page-hero::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:48%;
  background-repeat:no-repeat;background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 64%);
          mask-image:linear-gradient(90deg,transparent 0,#000 64%);
  opacity:.94;z-index:1;pointer-events:none;
}
/* keep phones clean — the ground would sit under the copy */
@media(max-width:900px){ body.skin-atelier .page-hero::after{display:none} }
@media(prefers-reduced-motion:reduce){ body.skin-atelier .page-hero::after{opacity:.9} }

/* per-page hero photograph (body.sg-<slug>) ----------------------------- */
body.skin-atelier.sg-geo .page-hero::after,
body.skin-atelier.sg-getting-named-by-ai-gcc .page-hero::after{background-image:url(../img/atelier/geo.jpg)}
body.skin-atelier.sg-seo .page-hero::after,
body.skin-atelier.sg-ai-visibility .page-hero::after{background-image:url(../img/atelier/arch_ceiling.jpg)}
body.skin-atelier.sg-ai-automation .page-hero::after,
body.skin-atelier.sg-systems .page-hero::after,
body.skin-atelier.sg-paid-ads .page-hero::after{background-image:url(../img/atelier/planes.jpg)}
body.skin-atelier.sg-branding .page-hero::after,
body.skin-atelier.sg-beauty .page-hero::after,
body.skin-atelier.sg-circle-brands .page-hero::after{background-image:url(../img/atelier/silk.jpg)}
body.skin-atelier.sg-ecommerce .page-hero::after,
body.skin-atelier.sg-how-we-work .page-hero::after,
body.skin-atelier.sg-engage .page-hero::after,
body.skin-atelier.sg-professional-services .page-hero::after{background-image:url(../img/atelier/arch2.jpg)}
body.skin-atelier.sg-creators .page-hero::after,
body.skin-atelier.sg-fashion-retail .page-hero::after,
body.skin-atelier.sg-circle .page-hero::after,
body.skin-atelier.sg-circle-creators .page-hero::after{background-image:url(../img/atelier/linen.jpg)}
body.skin-atelier.sg-content .page-hero::after{background-image:url(../img/atelier/flatlay.jpg)}
body.skin-atelier.sg-services .page-hero::after,
body.skin-atelier.sg-sectors .page-hero::after,
body.skin-atelier.sg-results .page-hero::after,
body.skin-atelier.sg-automotive .page-hero::after{background-image:url(../img/atelier/columns.jpg)}
body.skin-atelier.sg-real-estate .page-hero::after{background-image:url(../img/atelier/villa.jpg)}
body.skin-atelier.sg-food-and-beverage .page-hero::after{background-image:url(../img/atelier/table_marble.jpg)}
body.skin-atelier.sg-faq .page-hero::after{background-image:url(../img/atelier/lightwall.jpg)}
body.skin-atelier.sg-careers .page-hero::after,
body.skin-atelier.sg-proposal .page-hero::after{background-image:url(../img/atelier/hero_light.jpg)}
body.skin-atelier.sg-partners .page-hero::after,
body.skin-atelier.sg-contact .page-hero::after{background-image:url(../img/atelier/water.jpg)}
body.skin-atelier.sg-founder .page-hero::after{background-image:url(../img/atelier/founder_quote.jpg)}
body.skin-atelier.blog .page-hero::after{background-image:url(../img/atelier/hero_wide2.jpg)}

/* ---- homepage proof band: numbers over a dark-graded skyline ---------- */
body.skin-atelier #results-preview.at-dark{
  background-image:linear-gradient(rgba(23,22,20,.84),rgba(23,22,20,.74)),url(../img/atelier/d1.jpg);
  background-size:cover;background-position:center;
}

/* ---- homepage founder: a quote carried on an image (no stock portrait) - */
body.skin-atelier .at-portrait-photo{
  position:relative;margin:0 0 clamp(20px,2.4vw,28px);overflow:hidden;
  aspect-ratio:4/5;border:1px solid var(--at-hair);background:var(--at-paper);
}
body.skin-atelier .at-portrait-photo img{display:block;width:100%;height:100%;object-fit:cover}
body.skin-atelier .at-portrait-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(23,22,20,.72) 0,rgba(23,22,20,.12) 46%,transparent 72%);
}
body.skin-atelier .at-portrait-quote{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:clamp(20px,2.6vw,30px);
  font-family:var(--at-edit);font-style:italic;font-weight:400;
  font-size:clamp(17px,1.7vw,22px);line-height:1.28;color:var(--at-ivory);
}
body.skin-atelier .at-portrait-quote cite{
  display:block;margin-top:10px;font-style:normal;font-family:var(--at-sans);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--at-champagne-pale);
}

/* Systems categories: two cards → two columns (no empty third cell). */
body.skin-atelier #categories .ind-cards{grid-template-columns:1fr 1fr}
@media(max-width:760px){body.skin-atelier #categories .ind-cards{grid-template-columns:1fr}}

/* === MID-SECTION + JOURNAL IMAGE LAYER (v2.74.0) === */
/* Problem grid becomes an image-led bento: a photo feature cell beside the text tiles. */
body.skin-atelier.sg-seo #problem .prob-grid,
body.skin-atelier.sg-geo #problem .prob-grid,
body.skin-atelier.sg-ecommerce #problem .prob-grid,
body.skin-atelier.sg-creators #problem .prob-grid,
body.skin-atelier.sg-content #problem .prob-grid,
body.skin-atelier.sg-beauty #problem .prob-grid,
body.skin-atelier.sg-fashion-retail #problem .prob-grid,
body.skin-atelier.sg-real-estate #problem .prob-grid,
body.skin-atelier.sg-automotive #problem .prob-grid,
body.skin-atelier.sg-food-and-beverage #problem .prob-grid,
body.skin-atelier.sg-professional-services #problem .prob-grid,
body.skin-atelier.sg-founder #problem .prob-grid,
body.skin-atelier.sg-how-we-work #problem .prob-grid,
body.skin-atelier.sg-results #problem .prob-grid,
body.skin-atelier.sg-services #problem .prob-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(140px,1fr)}
body.skin-atelier.sg-seo #problem .prob-grid::before,
body.skin-atelier.sg-geo #problem .prob-grid::before,
body.skin-atelier.sg-ecommerce #problem .prob-grid::before,
body.skin-atelier.sg-creators #problem .prob-grid::before,
body.skin-atelier.sg-content #problem .prob-grid::before,
body.skin-atelier.sg-beauty #problem .prob-grid::before,
body.skin-atelier.sg-fashion-retail #problem .prob-grid::before,
body.skin-atelier.sg-real-estate #problem .prob-grid::before,
body.skin-atelier.sg-automotive #problem .prob-grid::before,
body.skin-atelier.sg-food-and-beverage #problem .prob-grid::before,
body.skin-atelier.sg-professional-services #problem .prob-grid::before,
body.skin-atelier.sg-founder #problem .prob-grid::before,
body.skin-atelier.sg-how-we-work #problem .prob-grid::before,
body.skin-atelier.sg-results #problem .prob-grid::before,
body.skin-atelier.sg-services #problem .prob-grid::before{
  content:"";grid-column:1;grid-row:1 / span 2;min-height:clamp(300px,32vw,440px);
  box-shadow:0 0 0 1px var(--at-hair);
  background-size:cover;background-position:center;background-repeat:no-repeat;}
@media(max-width:820px){body.skin-atelier.sg-seo #problem .prob-grid,body.skin-atelier.sg-geo #problem .prob-grid,body.skin-atelier.sg-ecommerce #problem .prob-grid,body.skin-atelier.sg-creators #problem .prob-grid,body.skin-atelier.sg-content #problem .prob-grid,body.skin-atelier.sg-beauty #problem .prob-grid,body.skin-atelier.sg-fashion-retail #problem .prob-grid,body.skin-atelier.sg-real-estate #problem .prob-grid,body.skin-atelier.sg-automotive #problem .prob-grid,body.skin-atelier.sg-food-and-beverage #problem .prob-grid,body.skin-atelier.sg-professional-services #problem .prob-grid,body.skin-atelier.sg-founder #problem .prob-grid,body.skin-atelier.sg-how-we-work #problem .prob-grid,body.skin-atelier.sg-results #problem .prob-grid,body.skin-atelier.sg-services #problem .prob-grid{grid-template-columns:1fr 1fr}body.skin-atelier.sg-seo #problem .prob-grid::before,body.skin-atelier.sg-geo #problem .prob-grid::before,body.skin-atelier.sg-ecommerce #problem .prob-grid::before,body.skin-atelier.sg-creators #problem .prob-grid::before,body.skin-atelier.sg-content #problem .prob-grid::before,body.skin-atelier.sg-beauty #problem .prob-grid::before,body.skin-atelier.sg-fashion-retail #problem .prob-grid::before,body.skin-atelier.sg-real-estate #problem .prob-grid::before,body.skin-atelier.sg-automotive #problem .prob-grid::before,body.skin-atelier.sg-food-and-beverage #problem .prob-grid::before,body.skin-atelier.sg-professional-services #problem .prob-grid::before,body.skin-atelier.sg-founder #problem .prob-grid::before,body.skin-atelier.sg-how-we-work #problem .prob-grid::before,body.skin-atelier.sg-results #problem .prob-grid::before,body.skin-atelier.sg-services #problem .prob-grid::before{grid-column:1 / -1;grid-row:auto;min-height:210px}}
@media(max-width:560px){body.skin-atelier.sg-seo #problem .prob-grid,body.skin-atelier.sg-geo #problem .prob-grid,body.skin-atelier.sg-ecommerce #problem .prob-grid,body.skin-atelier.sg-creators #problem .prob-grid,body.skin-atelier.sg-content #problem .prob-grid,body.skin-atelier.sg-beauty #problem .prob-grid,body.skin-atelier.sg-fashion-retail #problem .prob-grid,body.skin-atelier.sg-real-estate #problem .prob-grid,body.skin-atelier.sg-automotive #problem .prob-grid,body.skin-atelier.sg-food-and-beverage #problem .prob-grid,body.skin-atelier.sg-professional-services #problem .prob-grid,body.skin-atelier.sg-founder #problem .prob-grid,body.skin-atelier.sg-how-we-work #problem .prob-grid,body.skin-atelier.sg-results #problem .prob-grid,body.skin-atelier.sg-services #problem .prob-grid{grid-template-columns:1fr}}
body.skin-atelier.sg-seo #problem .prob-grid::before{background-image:url(../img/atelier/seo_mid.jpg)}
body.skin-atelier.sg-geo #problem .prob-grid::before{background-image:url(../img/atelier/geo_mid.jpg)}
body.skin-atelier.sg-ecommerce #problem .prob-grid::before{background-image:url(../img/atelier/ecom_mid.jpg)}
body.skin-atelier.sg-creators #problem .prob-grid::before{background-image:url(../img/atelier/creators_mid.jpg)}
body.skin-atelier.sg-content #problem .prob-grid::before{background-image:url(../img/atelier/brand_mid.jpg)}
body.skin-atelier.sg-beauty #problem .prob-grid::before{background-image:url(../img/atelier/beauty_mid.jpg)}
body.skin-atelier.sg-fashion-retail #problem .prob-grid::before{background-image:url(../img/atelier/retail_mid.jpg)}
body.skin-atelier.sg-real-estate #problem .prob-grid::before{background-image:url(../img/atelier/realestate_mid.jpg)}
body.skin-atelier.sg-automotive #problem .prob-grid::before{background-image:url(../img/atelier/automotive_mid.jpg)}
body.skin-atelier.sg-food-and-beverage #problem .prob-grid::before{background-image:url(../img/atelier/hospitality_mid.jpg)}
body.skin-atelier.sg-professional-services #problem .prob-grid::before{background-image:url(../img/atelier/proservices_mid.jpg)}
body.skin-atelier.sg-founder #problem .prob-grid::before{background-image:url(../img/atelier/columns.jpg)}
body.skin-atelier.sg-how-we-work #problem .prob-grid::before{background-image:url(../img/atelier/howwework_mid.jpg)}
body.skin-atelier.sg-results #problem .prob-grid::before{background-image:url(../img/atelier/arch1.jpg)}
body.skin-atelier.sg-services #problem .prob-grid::before{background-image:url(../img/atelier/sand_ripple.jpg)}

/* Pages without a problem bento: the closing CTA carries text on a background image. */
body.skin-atelier.sg-careers #closing,
body.skin-atelier.sg-contact #closing,
body.skin-atelier.sg-partners #closing,
body.skin-atelier.sg-faq #closing,
body.skin-atelier.sg-sectors #closing,
body.skin-atelier.sg-systems #closing,
body.skin-atelier.sg-ai-visibility #closing{background-size:cover;background-position:center;color:var(--at-ivory)}
body.skin-atelier.sg-careers #closing .eyebrow,body.skin-atelier.sg-contact #closing .eyebrow,body.skin-atelier.sg-partners #closing .eyebrow,body.skin-atelier.sg-faq #closing .eyebrow,body.skin-atelier.sg-sectors #closing .eyebrow,body.skin-atelier.sg-systems #closing .eyebrow,body.skin-atelier.sg-ai-visibility #closing .eyebrow{color:var(--at-champagne)}
body.skin-atelier.sg-careers #closing h2,body.skin-atelier.sg-contact #closing h2,body.skin-atelier.sg-partners #closing h2,body.skin-atelier.sg-faq #closing h2,body.skin-atelier.sg-sectors #closing h2,body.skin-atelier.sg-systems #closing h2,body.skin-atelier.sg-ai-visibility #closing h2,body.skin-atelier.sg-careers #closing h2 em,body.skin-atelier.sg-contact #closing h2 em,body.skin-atelier.sg-partners #closing h2 em,body.skin-atelier.sg-faq #closing h2 em,body.skin-atelier.sg-sectors #closing h2 em,body.skin-atelier.sg-systems #closing h2 em,body.skin-atelier.sg-ai-visibility #closing h2 em{color:var(--at-ivory)}
body.skin-atelier.sg-careers #closing .sub,body.skin-atelier.sg-contact #closing .sub,body.skin-atelier.sg-partners #closing .sub,body.skin-atelier.sg-faq #closing .sub,body.skin-atelier.sg-sectors #closing .sub,body.skin-atelier.sg-systems #closing .sub,body.skin-atelier.sg-ai-visibility #closing .sub,body.skin-atelier.sg-careers #closing .close-meta,body.skin-atelier.sg-contact #closing .close-meta,body.skin-atelier.sg-partners #closing .close-meta,body.skin-atelier.sg-faq #closing .close-meta,body.skin-atelier.sg-sectors #closing .close-meta,body.skin-atelier.sg-systems #closing .close-meta,body.skin-atelier.sg-ai-visibility #closing .close-meta{color:#E4DED2}
body.skin-atelier.sg-careers #closing{background-image:linear-gradient(rgba(23,22,20,.72),rgba(23,22,20,.66)),url(../img/atelier/careers_mid.jpg)}
body.skin-atelier.sg-contact #closing{background-image:linear-gradient(rgba(23,22,20,.72),rgba(23,22,20,.66)),url(../img/atelier/lightwall.jpg)}
body.skin-atelier.sg-partners #closing{background-image:linear-gradient(rgba(23,22,20,.72),rgba(23,22,20,.66)),url(../img/atelier/columns.jpg)}
body.skin-atelier.sg-faq #closing{background-image:linear-gradient(rgba(23,22,20,.72),rgba(23,22,20,.66)),url(../img/atelier/hero_wide2.jpg)}
body.skin-atelier.sg-sectors #closing{background-image:linear-gradient(rgba(23,22,20,.72),rgba(23,22,20,.66)),url(../img/atelier/columns.jpg)}
body.skin-atelier.sg-systems #closing{background-image:linear-gradient(rgba(23,22,20,.72),rgba(23,22,20,.66)),url(../img/atelier/arch2.jpg)}
body.skin-atelier.sg-ai-visibility #closing{background-image:linear-gradient(rgba(23,22,20,.72),rgba(23,22,20,.66)),url(../img/atelier/planes.jpg)}

/* Journal — single-article header photograph, a UNIQUE image per post (by slug). */
body.skin-atelier.single .page-hero::after{background-image:url(../img/atelier/jr_experience.jpg)}
body.skin-atelier.single .page-hero.jr-p-the-new-first-page::after{background-image:url(../img/atelier/jr_the-new-first-page.jpg)}
body.skin-atelier.single .page-hero.jr-p-the-monthly-readout::after{background-image:url(../img/atelier/jr_the-monthly-readout.jpg)}
body.skin-atelier.single .page-hero.jr-p-ramadan-to-dsf::after{background-image:url(../img/atelier/jr_ramadan-to-dsf.jpg)}
body.skin-atelier.single .page-hero.jr-p-start-small-prove-it::after{background-image:url(../img/atelier/jr_start-small-prove-it.jpg)}
body.skin-atelier.single .page-hero.jr-p-write-arabic-first::after{background-image:url(../img/atelier/jr_write-arabic-first.jpg)}
body.skin-atelier.single .page-hero.jr-p-the-metric-that-lies::after{background-image:url(../img/atelier/jr_the-metric-that-lies.jpg)}
body.skin-atelier.single .page-hero.jr-p-gcc-beauty-invisible-to-ai::after{background-image:url(../img/atelier/jr_gcc-beauty-invisible-to-ai.jpg)}

/* Journal index — photo-topped note cards, a UNIQUE image per post (skips cards that already have a WP featured image). */
body.skin-atelier .jr-card.jr-p-the-new-first-page:not(:has(.nc-img))::before,body.skin-atelier .jr-card.jr-p-the-monthly-readout:not(:has(.nc-img))::before,body.skin-atelier .jr-card.jr-p-ramadan-to-dsf:not(:has(.nc-img))::before,body.skin-atelier .jr-card.jr-p-start-small-prove-it:not(:has(.nc-img))::before,body.skin-atelier .jr-card.jr-p-write-arabic-first:not(:has(.nc-img))::before,body.skin-atelier .jr-card.jr-p-the-metric-that-lies:not(:has(.nc-img))::before,body.skin-atelier .jr-card.jr-p-gcc-beauty-invisible-to-ai:not(:has(.nc-img))::before{content:"";display:block;aspect-ratio:16/10;order:-1;
  margin:calc(-1*clamp(22px,2.6vw,28px)) calc(-1*clamp(22px,2.6vw,28px)) 4px;
  background-size:cover;background-position:center;background-repeat:no-repeat}
body.skin-atelier .jr-card.jr-p-the-new-first-page:not(:has(.nc-img))::before{background-image:url(../img/atelier/jr_the-new-first-page.jpg)}
body.skin-atelier .jr-card.jr-p-the-monthly-readout:not(:has(.nc-img))::before{background-image:url(../img/atelier/jr_the-monthly-readout.jpg)}
body.skin-atelier .jr-card.jr-p-ramadan-to-dsf:not(:has(.nc-img))::before{background-image:url(../img/atelier/jr_ramadan-to-dsf.jpg)}
body.skin-atelier .jr-card.jr-p-start-small-prove-it:not(:has(.nc-img))::before{background-image:url(../img/atelier/jr_start-small-prove-it.jpg)}
body.skin-atelier .jr-card.jr-p-write-arabic-first:not(:has(.nc-img))::before{background-image:url(../img/atelier/jr_write-arabic-first.jpg)}
body.skin-atelier .jr-card.jr-p-the-metric-that-lies:not(:has(.nc-img))::before{background-image:url(../img/atelier/jr_the-metric-that-lies.jpg)}
body.skin-atelier .jr-card.jr-p-gcc-beauty-invisible-to-ai:not(:has(.nc-img))::before{background-image:url(../img/atelier/jr_gcc-beauty-invisible-to-ai.jpg)}
/* end mid-section + journal image layer */

/* ---- Service pages, Atelier edition ----------------------------------- */
body.skin-atelier .svc-sys,body.skin-atelier .svc-qs{gap:1px}
body.skin-atelier .svc-sys li,body.skin-atelier .svc-qs li{
  background:var(--at-paper);border:0;box-shadow:0 0 0 1px var(--at-hair);transition:background .25s ease}
body.skin-atelier section.light .svc-sys li,body.skin-atelier section.light .svc-qs li{background:var(--at-ivory)}
body.skin-atelier .svc-sys li:hover{background:var(--at-ivory)}
body.skin-atelier .svc-n{font-family:var(--at-edit);font-style:italic;color:var(--at-champagne-text);font-size:15px}
body.skin-atelier .svc-sys b{font-family:var(--at-sans);font-weight:640;letter-spacing:-.015em;color:var(--at-ink)}
body.skin-atelier .svc-sys>li>span:last-child{color:var(--at-grey)}

body.skin-atelier .svc-band p{font-family:var(--at-edit);font-style:italic;font-weight:400;letter-spacing:-.02em}
body.skin-atelier .svc-band p b{color:var(--at-champagne)}

/* the mirror sits on ink, like the homepage proof band */
body.skin-atelier section.svc-mirror{background:var(--at-ink);border-top:0}
body.skin-atelier .svc-mirror .eyebrow{color:var(--at-champagne)}
body.skin-atelier .svc-mirror h2,body.skin-atelier .svc-mirror h2 em{color:var(--at-ivory)}
body.skin-atelier .svc-mirror .lede,body.skin-atelier .svc-mirror .sub{color:rgba(247,241,232,.8)}
body.skin-atelier .svc-mirror .svc-qs li{background:rgba(247,241,232,.045);box-shadow:0 0 0 1px var(--at-hair-light)}
body.skin-atelier .svc-mirror .svc-qs p{color:var(--at-ivory)}
body.skin-atelier .svc-mirror .svc-n{color:var(--at-champagne)}
body.skin-atelier .svc-qfoot{color:rgba(247,241,232,.55)}
body.skin-atelier .svc-mirror .geo-honest{background:transparent;color:rgba(247,241,232,.45);
  border-left:2px solid var(--at-champagne)}

body.skin-atelier .svc-out{gap:1px}
body.skin-atelier .svc-out>div{background:var(--at-paper);border:0;box-shadow:0 0 0 1px var(--at-hair)}
body.skin-atelier section.light .svc-out>div{background:var(--at-ivory)}
body.skin-atelier .svc-num{color:var(--at-oxblood);font-family:var(--at-sans)}
body.skin-atelier .svc-lab{color:var(--at-grey)}
body.skin-atelier .svc-noproof{font-family:var(--at-edit);font-style:italic;color:var(--at-ink-soft)}

body.skin-atelier .svc-gcard{background:var(--at-ivory);border:0;box-shadow:0 0 0 1px var(--at-hair)}
body.skin-atelier .svc-gk{color:var(--at-champagne-text)}
body.skin-atelier .svc-gcard b{font-family:var(--at-edit);color:var(--at-ink)}
body.skin-atelier .svc-gsub{color:var(--at-grey)}

/* per-service statement band photograph */
body.skin-atelier.sg-branding .svc-band{background-image:url(../img/atelier/brand_mid.jpg)}
body.skin-atelier.sg-paid-ads .svc-band{background-image:url(../img/atelier/ads_mid.jpg)}
body.skin-atelier.sg-seo .svc-band{background-image:url(../img/atelier/seo_mid.jpg)}
body.skin-atelier.sg-ecommerce .svc-band{background-image:url(../img/atelier/ecom_mid.jpg)}
body.skin-atelier.sg-creators .svc-band{background-image:url(../img/atelier/creators_mid.jpg)}
body.skin-atelier.sg-content .svc-band{background-image:url(../img/atelier/flatlay.jpg)}
body.skin-atelier.sg-ai-automation .svc-band{background-image:url(../img/atelier/automation_mid.jpg)}

/* ---- field guides ----------------------------------------------------- *
 * Same document, in Atelier's hand: hairlines drawn on the cells, the
 * editorial serif for anything quoted, champagne for every marker.        */
body.skin-atelier .fg-meta,body.skin-atelier .fg-b,body.skin-atelier .fg-ai,
body.skin-atelier .fg-cards p,body.skin-atelier .fg-note{color:var(--at-grey)}
body.skin-atelier .fg-doc p,body.skin-atelier .fg-real{color:var(--at-ink-soft)}
body.skin-atelier .fg-i,body.skin-atelier .fg-when,body.skin-atelier .fg-k,
body.skin-atelier .fg-d,body.skin-atelier .fg-verdict{color:var(--at-champagne-text)}
body.skin-atelier .fg-i{font-family:var(--at-edit);font-size:15px}
body.skin-atelier .fg-items li,body.skin-atelier .fg-seq li,body.skin-atelier .fg-rest li{
  border-color:var(--at-hair)}
body.skin-atelier .fg-items b,body.skin-atelier .fg-seq b{font-family:var(--at-sans);font-weight:640;
  letter-spacing:-.015em;color:var(--at-ink)}
body.skin-atelier .fg-callout{border-left-color:var(--at-champagne)}
body.skin-atelier .fg-callout p,body.skin-atelier .fg-verdict{font-family:var(--at-edit);font-style:italic}
body.skin-atelier .fg-callout p{font-size:16px;color:var(--at-ink-soft)}
body.skin-atelier .fg-cmp{background:var(--at-paper);border:0;box-shadow:0 0 0 1px var(--at-hair)}
body.skin-atelier section.light .fg-cmp{background:var(--at-ivory)}
body.skin-atelier .fg-q{background:transparent;border-bottom:1px solid var(--at-hair)}
body.skin-atelier .fg-q p{font-family:var(--at-edit);color:var(--at-ink)}
body.skin-atelier .fg-body>div:first-child{border-right-color:var(--at-hair)}
body.skin-atelier .fg-band .fg-bk{color:var(--at-champagne)}
body.skin-atelier .fg-cards{gap:1px}
body.skin-atelier .fg-cards li{background:var(--at-paper);border:0;box-shadow:0 0 0 1px var(--at-hair)}
body.skin-atelier section.light .fg-cards li{background:var(--at-ivory)}
body.skin-atelier .fg-cards li:hover{background:var(--at-ivory)}
body.skin-atelier section.light .fg-cards li:hover{background:var(--at-paper)}
body.skin-atelier .fg-cards b{font-family:var(--at-edit);color:var(--at-ink)}
@media(max-width:900px){
  body.skin-atelier .fg-body>div:first-child{border-right:0;border-bottom:1px solid var(--at-hair)}
}

/* per-guide photograph + band (body.sg-<slug>) --------------------------- */

body.skin-atelier.sg-guides .page-hero::after{background-image:url(../img/atelier/sand_ripple.jpg)}
body.skin-atelier.sg-branding-and-design .page-hero::after{background-image:url(../img/atelier/linen.jpg)}
body.skin-atelier.sg-websites-and-ecommerce .page-hero::after{background-image:url(../img/atelier/arch2.jpg)}
body.skin-atelier.sg-paid-advertising .page-hero::after{background-image:url(../img/atelier/columns.jpg)}
body.skin-atelier.sg-seo-and-ai-search .page-hero::after{background-image:url(../img/atelier/arch_ceiling.jpg)}
body.skin-atelier.sg-geo-and-ai-search .page-hero::after{background-image:url(../img/atelier/geo.jpg)}
body.skin-atelier.sg-creators-pr-and-reviews .page-hero::after{background-image:url(../img/atelier/silk.jpg)}
body.skin-atelier.sg-content-and-social-media .page-hero::after{background-image:url(../img/atelier/lightwall.jpg)}
body.skin-atelier.sg-ai-and-automation .page-hero::after{background-image:url(../img/atelier/planes.jpg)}
body.skin-atelier.sg-branding-and-design .svc-band{background-image:url(../img/atelier/brand_mid.jpg)}
body.skin-atelier.sg-websites-and-ecommerce .svc-band{background-image:url(../img/atelier/ecom_mid.jpg)}
body.skin-atelier.sg-paid-advertising .svc-band{background-image:url(../img/atelier/ads_mid.jpg)}
body.skin-atelier.sg-seo-and-ai-search .svc-band{background-image:url(../img/atelier/seo_mid.jpg)}
body.skin-atelier.sg-geo-and-ai-search .svc-band{background-image:url(../img/atelier/geo_mid.jpg)}
body.skin-atelier.sg-creators-pr-and-reviews .svc-band{background-image:url(../img/atelier/creators_mid.jpg)}
body.skin-atelier.sg-content-and-social-media .svc-band{background-image:url(../img/atelier/flatlay.jpg)}
body.skin-atelier.sg-ai-and-automation .svc-band{background-image:url(../img/atelier/automation_mid.jpg)}
body.skin-atelier .fg-doc .lede{font-size:18px;line-height:1.68;color:var(--at-ink-soft)}
body.skin-atelier .fg-cards b em,body.skin-atelier .svc-gcard b em{color:var(--at-champagne-deep)}

/* ---- diagrams, in Atelier's hand -------------------------------------- */
body.skin-atelier .dg-cap{color:var(--at-grey)}
body.skin-atelier .dg-cap b,body.skin-atelier .dg-v,body.skin-atelier .dg-when,
body.skin-atelier .dg-n,body.skin-atelier .dg-k,body.skin-atelier .dg-stem-f,
body.skin-atelier .dg-mx>.h,body.skin-atelier .dg-ch-h,body.skin-atelier .dg-grp b{
  color:var(--at-champagne-text)}
body.skin-atelier .dg-stem-f{color:var(--at-grey)}
body.skin-atelier .dg-root{background:var(--at-ivory);border:0;box-shadow:0 0 0 1px var(--at-hair);
  font-family:var(--at-edit);color:var(--at-ink)}
body.skin-atelier section.light .dg-root{background:var(--at-paper)}
body.skin-atelier .dg-root::after,body.skin-atelier .dg-arms::before,
body.skin-atelier .dg-arm::before,body.skin-atelier .dg-flow li::after,
body.skin-atelier .dg-ar,body.skin-atelier .dg-l .dg-mod::after,
body.skin-atelier .dg-r .dg-mod::after{background:var(--at-hair)}
body.skin-atelier .dg-arm,body.skin-atelier .dg-mod,body.skin-atelier .dg-grp{
  background:var(--at-paper);box-shadow:0 0 0 1px var(--at-hair)}
body.skin-atelier section.light .dg-arm,body.skin-atelier section.light .dg-mod,
body.skin-atelier section.light .dg-grp{background:var(--at-ivory)}
body.skin-atelier .dg-w,body.skin-atelier .dg-step b,body.skin-atelier .dg-mod b,
body.skin-atelier .dg-time b{font-family:var(--at-sans);font-weight:640;letter-spacing:-.012em;
  color:var(--at-ink)}
body.skin-atelier .dg-lv li{color:var(--at-grey);border-color:var(--at-hair)}
body.skin-atelier .dg-lv li::before,body.skin-atelier .dg-grp li::before{background:var(--at-champagne-deep)}
body.skin-atelier .dg-mx{border:0;box-shadow:0 0 0 1px var(--at-hair)}
body.skin-atelier .dg-mx>span{border-color:var(--at-hair)}
body.skin-atelier .dg-mx>.h{background:var(--at-ivory)}
body.skin-atelier section.light .dg-mx>.h{background:var(--at-paper)}
body.skin-atelier .dg-mx>.a{font-family:var(--at-edit);color:var(--at-ink)}
body.skin-atelier .dg-mx>.g,body.skin-atelier .dg-step>span,body.skin-atelier .dg-chain .c2,
body.skin-atelier .dg-mod>span:last-child,body.skin-atelier .dg-time li>span:last-child{color:var(--at-grey)}
body.skin-atelier .dg-mx>.d{background:var(--at-ivory);box-shadow:inset 2px 0 0 var(--at-champagne);
  color:var(--at-ink)}
body.skin-atelier section.light .dg-mx>.d{background:var(--at-paper)}
body.skin-atelier .dg-dot::before,body.skin-atelier .dg-time li::before{background:var(--at-champagne)}
body.skin-atelier .dg-chain ul,body.skin-atelier .dg-chain li,body.skin-atelier .dg-time ol{
  border-color:var(--at-hair)}
body.skin-atelier .dg-chain .c3{color:var(--at-oxblood)}
body.skin-atelier .dg-ar::after{border-color:var(--at-champagne-deep)}
body.skin-atelier .dg-hub{background:var(--at-ink);color:var(--at-ivory);font-family:var(--at-edit)}
body.skin-atelier .dg-stem{background:var(--at-ivory);box-shadow:0 0 0 1px var(--at-hair)}
body.skin-atelier section.light .dg-stem{background:var(--at-paper)}
body.skin-atelier .dg-stem b{font-family:var(--at-edit);color:var(--at-ink)}
body.skin-atelier .dg-grp li{color:var(--at-ink-soft)}
/* on the ink mirror band the diagrams have to invert */
body.skin-atelier .svc-mirror .dg-mod,body.skin-atelier .svc-mirror .dg-arm{
  background:rgba(247,241,232,.045);box-shadow:0 0 0 1px var(--at-hair-light)}
body.skin-atelier .svc-mirror .dg-mod b,body.skin-atelier .svc-mirror .dg-w{color:var(--at-ivory)}
body.skin-atelier .fg-body.one .fg-verdict{border-bottom-color:var(--at-hair)}
body.skin-atelier .form-error{color:var(--at-oxblood);border-left-color:var(--at-oxblood);background:rgba(129,31,60,.05)}
body.skin-atelier .jr-pages{border-top-color:var(--at-hair)}
body.skin-atelier .jr-pages .page-numbers{border:0;box-shadow:0 0 0 1px var(--at-hair);color:var(--at-ink-soft)}
body.skin-atelier .jr-pages .page-numbers.current{background:var(--at-ink);color:var(--at-ivory)}
body.skin-atelier .jr-pages .page-numbers:hover{background:var(--at-ivory)}