/* =============================================================================
SXM blog — index and single post.
Same language as the rest of the rebuilt site: black canvas, one grey rule, one
hairline, display lockups on the two real faces, mono eyebrows, container-query
units off the component's own inline size (never vw — body has overflow-x:hidden
so vw includes the scrollbar).
THE IMAGES. All 138 posts carry bright blue stock illustrations that fight a black
site. They are unified by treatment rather than replacement: greyscale at rest,
full colour on hover/focus. One rule turns 138 mismatched assets into a system.
Every bare tag carries a .sxm-bl / .sxm-post prefix, or .elementor-kit-7 h3 at
(0,1,1) paints it black on black.
========================================================================== */
body.sxm-blogindex, body.sxm-post{ background:#000; }
.sxm-bl,
body.sxm-post .elementor-widget-theme-post-content{
--u: calc(100cqi / 1360);
--sxm-display:'F37 Stout Black Compressed',sans-serif;
--sxm-wide:'Nord Medium','Nord Regular',sans-serif;
--sxm-body:'Nord Regular',sans-serif;
--sxm-mono:'OCR A Extended','Ocr A Tribute',monospace; /* SXM FONT SUBSTITUTE */
--sxm-copy:'DM Sans',system-ui,sans-serif; /* SXM FONT SUBSTITUTE: Circular Std */
--hair:#404040; --line:rgba(255,255,255,.14);
--ink:#fff; --prose:rgba(255,255,255,.86); --muted:rgba(255,255,255,.62);
--dim:rgba(255,255,255,.45); --accent:#E8C33C;
--bl-pad:max(20px,min(40px,calc((100vw - 1360px)/2)));
--s2:calc(32*var(--u)); --s3:calc(56*var(--u)); --s4:calc(96*var(--u));
}
.sxm-bl{ container-type:inline-size; padding:var(--s2) var(--bl-pad) var(--s4);
background:#000; color:var(--ink); }
.sxm-bl *,.sxm-bl *::before,.sxm-bl *::after{ box-sizing:border-box; }
/* --------------------------------------------------------------- open band */
.sxm-bl .sxm-bl-rule{ height:1px; background:var(--hair); margin-bottom:calc(14*var(--u)); }
.sxm-bl .sxm-bl-eyebrow{
font-family:var(--sxm-mono); font-size:13px; line-height:30px; letter-spacing:2.47px;
text-transform:uppercase; opacity:.6; margin:0 0 calc(18*var(--u));
}
.sxm-bl .sxm-bl-lock{
--lu:calc(100cqi / 1360); --capmid:.9808; --dsz:110; --wtrk:-.04em;
display:flex; flex-wrap:wrap; align-items:baseline; gap:0 calc(11*var(--lu));
margin:0 0 calc(34*var(--u)); text-transform:uppercase; color:var(--ink);
overflow-wrap:normal; word-break:normal;
/* the lockup owns its line box: the kit's h1/h2 line-height (1.09em → 60px, 1.11em → 50px) is
inherited by the display spans as FIXED pixels, so a 106–195px word sat in a 60px line and painted
30–80px above it, straight over the eyebrow (§53) */
line-height:1;
}
.sxm-bl .sxm-bl-lock i{ font-style:normal; white-space:nowrap; }
.sxm-bl .sxm-bl-lock .d{ font-family:var(--sxm-display); font-weight:900;
font-size:calc(var(--dsz) * var(--capmid) * var(--lu)); letter-spacing:0; }
.sxm-bl .sxm-bl-lock .w{ font-family:var(--sxm-wide); font-weight:500;
font-size:calc(var(--dsz) * var(--capmid) * 1.1543 * var(--lu)); letter-spacing:var(--wtrk); }
.sxm-bl .sxm-bl-lede{
font-family:var(--sxm-copy); font-weight:300;
font-size:clamp(17px,calc(24*var(--u)),26px); line-height:1.45; letter-spacing:.005em;
color:var(--ink); max-width:calc(880*var(--u)); margin:0;
}
/* ----------------------------------------------------------------- filters */
.sxm-bl-filters{ display:flex; flex-wrap:wrap; gap:min(calc(10*var(--u)),10px); margin:var(--s3) 0 var(--s3); }
.sxm-bl .sxm-bl-pill{
display:inline-flex; align-items:center; gap:.55em;
/* a control, not display type: it scales DOWN with the measure but never above the comp's size
(58px at 1440); at 2560 it had grown to 105px (§53) */
min-height:44px; height:min(calc(58*var(--u)),58px); padding:0 min(calc(30*var(--u)),30px);
border:1px solid rgba(255,255,255,.5); border-radius:999px;
background:transparent; color:var(--ink); text-decoration:none;
font-family:var(--sxm-copy); font-weight:700;
font-size:clamp(13px,calc(17*var(--u)),17px); line-height:1.15; letter-spacing:-.01em;
white-space:nowrap; transition:background-color .24s ease,color .24s ease,border-color .24s ease;
}
.sxm-bl .sxm-bl-pill i{ font-style:normal; font-size:.72em; opacity:.5; }
.sxm-bl .sxm-bl-pill:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.sxm-bl .sxm-bl-pill:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.sxm-bl .sxm-bl-pill.is-on{ background:#fff; color:#000; border-color:#fff; }
/* ------------------------------------------------------------------- cards */
.sxm-bl-grid{
display:grid; grid-template-columns:repeat(3,1fr);
column-gap:calc(40*var(--u)); row-gap:calc(72*var(--u));
}
.sxm-bl .sxm-bl-card{ margin:0; }
.sxm-bl .sxm-bl-link{
display:grid; grid-template-rows:auto 1fr; gap:calc(22*var(--u));
text-decoration:none; color:var(--ink); height:100%;
}
.sxm-bl .sxm-bl-link:focus-visible{ outline:2px solid #fff; outline-offset:6px; }
.sxm-bl .sxm-bl-media{
display:block; position:relative; overflow:hidden;
aspect-ratio:16/10; background:#151515;
border-top:1px solid var(--hair); padding-top:calc(18*var(--u));
}
.sxm-bl .sxm-bl-media img{
width:100%; height:100%; object-fit:cover; display:block;
/* 138 bright stock illustrations unified by treatment, colour on hover */
filter:grayscale(1) contrast(1.06) brightness(.82);
transform:scale(1.001);
transition:filter .45s ease, transform .6s cubic-bezier(.16,.84,.44,1);
}
.sxm-bl .sxm-bl-link:hover .sxm-bl-media img,
.sxm-bl .sxm-bl-link:focus-visible .sxm-bl-media img{
filter:grayscale(0) contrast(1) brightness(1); transform:scale(1.03);
}
.sxm-bl .sxm-bl-noimg{ display:block; width:100%; height:100%; background:#151515; }
.sxm-bl .sxm-bl-meta{
display:flex; flex-wrap:wrap; align-items:baseline; gap:0 calc(14*var(--u));
font-family:var(--sxm-mono); font-size:12px; line-height:26px; letter-spacing:2.2px;
text-transform:uppercase; color:var(--dim); margin-bottom:calc(12*var(--u));
}
.sxm-bl .sxm-bl-meta b{ font-weight:400; }
.sxm-bl .sxm-bl-cat{ color:var(--ink); opacity:.8; }
.sxm-bl .sxm-bl-n{ opacity:.55; }
.sxm-bl .sxm-bl-title{
font-family:var(--sxm-copy); font-weight:700; /* SXM FONT SUBSTITUTE: Circular Std Black */
font-size:clamp(18px,calc(24*var(--u)),25px); line-height:1.18; letter-spacing:-.03em;
color:var(--ink); margin:0 0 calc(12*var(--u));
}
.sxm-bl .sxm-bl-link:hover .sxm-bl-title{ text-decoration:underline; text-underline-offset:5px; }
.sxm-bl .sxm-bl-ex{
display:block; font-family:var(--sxm-copy); font-weight:300;
font-size:clamp(13px,calc(15*var(--u)),16px); line-height:calc(24/15);
color:var(--muted); margin-bottom:calc(16*var(--u));
}
.sxm-bl .sxm-bl-more{
display:inline-flex; align-items:center; gap:.6em;
font-family:var(--sxm-wide); font-weight:500;
font-size:clamp(10px,calc(11*var(--u)),12px); letter-spacing:.14em; text-transform:uppercase;
color:var(--ink);
}
.sxm-bl .sxm-bl-arrow{ width:11px; height:11px; display:block; }
.sxm-bl .sxm-bl-arrow svg{ width:100%; height:100%; display:block; }
/* the newest post gets the full measure */
.sxm-bl-leadband{ margin-bottom:var(--s4); }
.sxm-bl .sxm-bl-card--lead .sxm-bl-link{
grid-template-columns:calc(760*var(--u)) 1fr; grid-template-rows:auto;
column-gap:calc(56*var(--u)); align-items:center;
}
.sxm-bl .sxm-bl-card--lead .sxm-bl-media{ aspect-ratio:16/9; border-top:0; padding-top:0; }
.sxm-bl .sxm-bl-card--lead .sxm-bl-title{
font-size:clamp(26px,calc(48*var(--u)),50px); line-height:1.08; letter-spacing:-.04em;
}
.sxm-bl .sxm-bl-card--lead .sxm-bl-ex{ font-size:clamp(14px,calc(17*var(--u)),18px); }
/* -------------------------------------------------------------- pagination */
.sxm-bl-pager{
display:flex; flex-wrap:wrap; gap:calc(8*var(--u)); justify-content:center;
margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--hair);
}
.sxm-bl-pager .page-numbers{
display:inline-flex; align-items:center; justify-content:center;
min-width:48px; min-height:48px; padding:0 14px;
border:1px solid var(--line); border-radius:4px;
font-family:var(--sxm-mono); font-size:13px; letter-spacing:1.6px;
color:var(--ink); text-decoration:none;
transition:background-color .22s ease,border-color .22s ease,color .22s ease;
}
.sxm-bl-pager .page-numbers:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.sxm-bl-pager .page-numbers.current{ background:#fff; color:#000; border-color:#fff; }
.sxm-bl-pager .page-numbers.dots{ border-color:transparent; }
/* ------------------------------------------------------------ tablet/phone */
@media (max-width:1024px){
.sxm-bl-grid{ grid-template-columns:repeat(2,1fr); row-gap:calc(56*var(--u)); }
.sxm-bl .sxm-bl-card--lead .sxm-bl-link{ grid-template-columns:1fr; row-gap:24px; }
/* NO --dsz override: --lu is already in container units, so the lockup holds the same
61% of the measure at 1024 as at 1440. Re-basing it here overflowed by 170px. */
}
@media (max-width:767px){
.sxm-bl{ padding:34px 20px 60px; }
/* below 768 the COMPOSITION changes — one word per line — which is what lets the size
go up. 176 makes the longest word (ACCELERATE) fill the phone measure exactly. */
.sxm-bl .sxm-bl-lock{ --dsz:168; flex-direction:column; align-items:flex-start; gap:0; }
.sxm-bl-grid{ grid-template-columns:1fr; row-gap:44px; }
.sxm-bl-filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
-webkit-overflow-scrolling:touch; margin:28px 0 34px; padding-bottom:4px; }
.sxm-bl-filters::-webkit-scrollbar{ display:none; }
.sxm-bl .sxm-bl-pill{ height:44px; font-size:13px; padding-inline:18px; flex:0 0 auto; }
.sxm-bl .sxm-bl-eyebrow{ font-size:11px; letter-spacing:1.8px; }
.sxm-bl .sxm-bl-card--lead .sxm-bl-title{ font-size:26px; }
}
/* ------------------------------------------------------------------ motion */
.sxm-bl-rv{ opacity:0; transform:translate3d(0,20px,0); }
.sxm-bl-rv.is-in{ opacity:1; transform:none;
transition:opacity .6s ease var(--d,0s), transform .7s cubic-bezier(.16,.84,.44,1) var(--d,0s); }
@media (prefers-reduced-motion:reduce){ .sxm-bl-rv{ opacity:1; transform:none; transition:none; } }
/* =============================================================================
SINGLE POST
The 138 posts are NOT rebuilt — they hold real editorial copy and are perfectly
uniform, so they are restyled by element id, which is stable across all of them:
7c28048 hero band (holds 3a4488d > 513b2e2, the h1)
e8025d7 meta band (post-info)
49c538c #article-content — the body text-editors
79b6bcb optional FAQ · 7ffd334 optional spacer · f509465 the shared TopFooter
Nothing here can lose a word of copy.
========================================================================== */
body.sxm-post,
body.sxm-post .elementor,
body.sxm-post .elementor-widget-theme-post-content{ background:#000; color:#fff; }
body.sxm-post .elementor-element-7c28048,
body.sxm-post .elementor-element-e8025d7,
body.sxm-post .elementor-element-49c538c,
body.sxm-post .elementor-element-79b6bcb,
body.sxm-post .elementor-element-7ffd334{
--u:calc(100cqi / 1360);
--sxm-display:'F37 Stout Black Compressed',sans-serif;
--sxm-wide:'Nord Medium','Nord Regular',sans-serif;
--sxm-mono:'OCR A Extended','Ocr A Tribute',monospace; /* SXM FONT SUBSTITUTE */
--sxm-copy:'DM Sans',system-ui,sans-serif; /* SXM FONT SUBSTITUTE: Circular Std */
--ink:#fff; --prose:rgba(255,255,255,.86); --dim:rgba(255,255,255,.45);
--line:rgba(255,255,255,.14); --accent:#E8C33C;
--measure:min(820px, 100%);
background:transparent;
}
/* ---- hero: every post sets background_background:slideshow, which is why the
image TILED across the band. Force a single covering image and scrim it. ---- */
body.sxm-post .elementor-element-7c28048{
background-repeat:no-repeat !important;
background-size:cover !important;
background-position:center !important;
background-attachment:scroll !important;
min-height:clamp(340px, 52vw, 620px);
display:flex !important; align-items:flex-end !important;
padding:0 !important; position:relative; overflow:hidden;
}
body.sxm-post .elementor-element-7c28048 .swiper,
body.sxm-post .elementor-element-7c28048 .elementor-background-slideshow{
/* the slideshow layer is what repeated — let the container's own background show */
position:absolute; inset:0;
}
body.sxm-post .elementor-element-7c28048 .elementor-background-slideshow__slide__image{
background-repeat:no-repeat !important; background-size:cover !important;
background-position:center !important;
}
body.sxm-post .elementor-element-7c28048::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.30) 68%, rgba(0,0,0,.18) 100%);
}
body.sxm-post .elementor-element-3a4488d{
position:relative; z-index:2; width:100%;
max-width:1360px; margin:0 auto;
padding:0 max(20px,min(40px,calc((100vw - 1360px)/2))) clamp(28px,4.4vw,60px) !important;
}
body.sxm-post .elementor-element-513b2e2 .elementor-heading-title{
font-family:var(--sxm-display) !important; font-weight:900 !important;
font-size:clamp(30px, 5.2vw, 74px) !important;
line-height:1.02 !important; letter-spacing:-.005em !important;
text-transform:uppercase !important; color:#fff !important;
text-align:left !important; margin:0 !important;
max-width:22ch;
}
/* ---- meta ---- */
body.sxm-post .elementor-element-e8025d7{
max-width:1360px; margin:0 auto; padding:clamp(20px,2.2vw,30px) max(20px,min(40px,calc((100vw - 1360px)/2))) 0 !important;
}
body.sxm-post .elementor-element-e8025d7 .elementor-post-info{
display:flex; flex-wrap:wrap; gap:0 22px; padding:0; margin:0;
}
body.sxm-post .elementor-element-e8025d7 .elementor-post-info__item,
body.sxm-post .elementor-element-e8025d7 .elementor-post-info__item a{
font-family:var(--sxm-mono) !important; font-size:12px !important; line-height:26px !important;
letter-spacing:2.2px !important; text-transform:uppercase !important;
color:var(--dim) !important; text-decoration:none;
}
body.sxm-post .elementor-element-e8025d7 .elementor-post-info__item a:hover{ color:#fff !important; }
body.sxm-post .elementor-element-e8025d7 .elementor-icon-list-icon{ display:none !important; }
body.sxm-post .elementor-element-e8025d7 .elementor-inline-item::after{ display:none !important; }
/* ---- body ---- */
body.sxm-post .elementor-element-49c538c{
max-width:var(--measure); margin:0 auto;
padding:clamp(28px,3.6vw,52px) 20px clamp(40px,5vw,72px) !important;
}
body.sxm-post .elementor-element-49c538c p,
body.sxm-post .elementor-element-49c538c li{
font-family:var(--sxm-copy); font-weight:300;
font-size:clamp(16px,1.35vw,19px); line-height:1.78; letter-spacing:.005em;
color:var(--prose);
}
body.sxm-post .elementor-element-49c538c p{ margin:0 0 1.35em; }
body.sxm-post .elementor-element-49c538c h2,
body.sxm-post .elementor-element-49c538c h3,
body.sxm-post .elementor-element-49c538c h4{
font-family:var(--sxm-wide); font-weight:500; color:#fff;
letter-spacing:-.01em; line-height:1.22;
margin:2em 0 .7em;
}
body.sxm-post .elementor-element-49c538c h2{ font-size:clamp(22px,2.1vw,30px); }
body.sxm-post .elementor-element-49c538c h3{ font-size:clamp(19px,1.7vw,24px); }
body.sxm-post .elementor-element-49c538c h4{ font-size:clamp(17px,1.45vw,20px); }
body.sxm-post .elementor-element-49c538c ul,
body.sxm-post .elementor-element-49c538c ol{ margin:0 0 1.35em; padding-left:1.4em; }
body.sxm-post .elementor-element-49c538c li{ margin-bottom:.5em; }
body.sxm-post .elementor-element-49c538c li::marker{ color:var(--dim); }
body.sxm-post .elementor-element-49c538c a{
color:#fff; text-decoration:underline; text-underline-offset:3px;
text-decoration-color:rgba(255,255,255,.4); transition:text-decoration-color .2s ease,color .2s ease;
}
/* the last gold HOVER on the site. Article links now resolve the same way the buttons
do -- monochrome: the underline goes from 40% to solid white. The remaining gold is
all static accent (notes, blockquote rule, focus rings, validation), which is the
separate #E8C33C vs #FFDC30 decision still open for Juan. */
body.sxm-post .elementor-element-49c538c a:hover{ color:#fff; text-decoration-color:#fff; }
body.sxm-post .elementor-element-49c538c strong{ color:#fff; font-weight:700; }
body.sxm-post .elementor-element-49c538c blockquote{
margin:2em 0; padding:0 0 0 1.4em; border-left:2px solid var(--accent);
font-family:var(--sxm-wide); font-weight:500; font-style:normal;
font-size:clamp(18px,1.7vw,24px); line-height:1.4; color:#fff;
}
body.sxm-post .elementor-element-49c538c img{ max-width:100%; height:auto; display:block; margin:2em auto; }
body.sxm-post .elementor-element-49c538c table{ width:100%; border-collapse:collapse; margin:2em 0; }
body.sxm-post .elementor-element-49c538c th,
body.sxm-post .elementor-element-49c538c td{
border-bottom:1px solid var(--line); padding:12px 10px; text-align:left;
font-family:var(--sxm-copy); font-size:15px; color:var(--prose);
}
body.sxm-post .elementor-element-49c538c th{ font-family:var(--sxm-mono); font-size:12px;
letter-spacing:2px; text-transform:uppercase; color:var(--dim); }
/* the TL;DR opener is a real editorial device in this copy — give it standing */
body.sxm-post .elementor-element-2a9b32c p:first-child{
font-size:clamp(17px,1.5vw,21px); line-height:1.6; color:#fff;
padding:clamp(18px,2vw,26px) 0 clamp(18px,2vw,26px);
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
body.sxm-post .elementor-element-2a9b32c p:first-child strong{ color:var(--accent); }
/* ---- the optional Qi FAQ block ---- */
body.sxm-post .elementor-element-79b6bcb{
max-width:var(--measure); margin:0 auto; padding:0 20px clamp(30px,4vw,56px) !important;
}
body.sxm-post .elementor-element-79b6bcb .qodef-e-title,
body.sxm-post .elementor-element-79b6bcb .qodef-accordion-title{
font-family:var(--sxm-copy) !important; font-weight:700 !important; color:#fff !important;
}
body.sxm-post .elementor-element-79b6bcb p{
font-family:var(--sxm-copy); font-weight:300; color:var(--prose);
}
@media (max-width:767px){
body.sxm-post .elementor-element-513b2e2 .elementor-heading-title{ max-width:none; }
body.sxm-post .elementor-element-49c538c{ padding-inline:20px !important; }
}
/* ---- alignment corrections ----
The posts were authored centred and justified. Justified text at this measure opens
rivers of white space between words (visible in every paragraph); the site is
left-aligned everywhere else. The hero's inner container also boxes to 1140 rather
than the 1360 measure, so the title sat inset from the page gutter. */
body.sxm-post .elementor-element-3a4488d > .e-con-inner{ max-width:none !important; padding:0 !important; }
body.sxm-post .elementor-element-513b2e2,
body.sxm-post .elementor-element-513b2e2 .elementor-widget-container{ text-align:left !important; }
body.sxm-post .elementor-element-e8025d7,
body.sxm-post .elementor-element-e8025d7 .elementor-widget-container,
body.sxm-post .elementor-element-e8025d7 .elementor-post-info{
text-align:left !important; justify-content:flex-start !important;
}
body.sxm-post .elementor-element-e8025d7 > .e-con-inner{ max-width:none !important; padding:0 !important; }
body.sxm-post .elementor-element-49c538c p,
body.sxm-post .elementor-element-49c538c li,
body.sxm-post .elementor-element-49c538c .elementor-widget-container{
text-align:left !important;
}
/* headings inside the body were authored centred */
body.sxm-post .elementor-element-49c538c h1,
body.sxm-post .elementor-element-49c538c h2,
body.sxm-post .elementor-element-49c538c h3,
body.sxm-post .elementor-element-49c538c h4,
body.sxm-post .elementor-element-49c538c h5,
body.sxm-post .elementor-element-49c538c h6{ text-align:left !important; }
/* ---- the Qi FAQ accordion (17 posts carry one) ----
Ships as a near-white bar (#F6F6F6) with white title text and black icons: the question
is invisible, and the title is set at 38px Unbounded. Rebuilt in the site's FAQ language,
matching /marketing/: dark card, 12px radius, white type, circled +/-. */
body.sxm-post .elementor-element-79b6bcb .qodef-qi-faq{ display:flex; flex-direction:column; gap:10px; }
body.sxm-post .elementor-element-79b6bcb .qodef-e-title-holder{
background:rgba(158,158,158,.15) !important;
border:0 !important; border-radius:12px !important;
margin:0 !important; padding:20px 22px !important;
display:flex !important; align-items:center; gap:18px;
min-height:68px; cursor:pointer;
}
body.sxm-post .elementor-element-79b6bcb .qodef-e-title-holder.ui-state-active{
border-radius:12px 12px 0 0 !important;
}
body.sxm-post .elementor-element-79b6bcb .qodef-e-title{
font-family:var(--sxm-copy) !important; font-weight:700 !important;
font-size:clamp(15px,1.4vw,20px) !important; line-height:1.25 !important;
letter-spacing:-.01em !important; color:#fff !important; text-transform:none !important;
order:2; flex:1;
}
/* Qi keeps BOTH icons in the DOM and hides one with opacity, so the collapsed span still
takes flex space and shoves the visible glyph off-centre. Stack them absolutely instead. */
body.sxm-post .elementor-element-79b6bcb .qodef-e-mark{
order:1; flex:0 0 auto; position:relative;
width:28px; height:28px; border-radius:50%;
border:1px solid #fff; display:block !important;
color:#fff !important; font-size:0 !important;
}
body.sxm-post .elementor-element-79b6bcb .qodef-e-mark > *{
position:absolute !important; inset:0 !important;
display:flex !important; align-items:center !important; justify-content:center !important;
width:auto !important; height:auto !important; margin:0 !important;
}
body.sxm-post .elementor-element-79b6bcb .qodef-e-mark svg{ width:11px; height:11px; display:block; }
body.sxm-post .elementor-element-79b6bcb .qodef-e-mark svg *{ fill:#fff !important; stroke:#fff !important; }
body.sxm-post .elementor-element-79b6bcb .qodef-e-content{
background:rgba(158,158,158,.09) !important;
border:0 !important; border-radius:0 0 12px 12px !important;
margin:0 !important; padding:0 !important;
}
body.sxm-post .elementor-element-79b6bcb .qodef-e-content-inner{ padding:4px 22px 22px 68px !important; }
body.sxm-post .elementor-element-79b6bcb .qodef-e-content-inner p{
font-family:var(--sxm-copy); font-weight:300;
font-size:clamp(14px,1.15vw,16px); line-height:1.7; color:var(--prose); margin:0 0 .8em;
}
body.sxm-post .elementor-element-79b6bcb .qodef-e-content-inner p:last-child{ margin-bottom:0; }
@media (max-width:767px){
body.sxm-post .elementor-element-79b6bcb .qodef-e-title-holder{ padding:16px 16px !important; gap:14px; min-height:56px; }
body.sxm-post .elementor-element-79b6bcb .qodef-e-content-inner{ padding:4px 16px 18px 54px !important; }
}
/* =============================================================================
POST CHROME — the way back, and the end of the article
========================================================================== */
/* the shared "TopFooter" (6221) is replaced on posts by [sxm_post_footer]. It is a white
Unbounded block with two stacked forms and a Qi slider whose Swiper never initialises —
its slides laid out in a row and overflowed the page. Still used by /creative/ and
/strategy/, so it is hidden here rather than deleted. */
body.sxm-post .elementor-element-f509465{ display:none !important; }
.sxm-pt{
max-width:1360px; margin:0 auto;
padding:clamp(18px,2vw,26px) max(20px,min(40px,calc((100vw - 1360px)/2))) 0;
font-family:'OCR A Extended','Ocr A Tribute',monospace; /* SXM FONT SUBSTITUTE */
font-size:12px; line-height:26px; letter-spacing:2.2px; text-transform:uppercase;
}
.sxm-pt a{ color:rgba(255,255,255,.6); text-decoration:none; transition:color .2s ease; }
.sxm-pt a:hover{ color:#fff; }
.sxm-pt a:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.sxm-pt .sxm-pt-ar{ display:inline-block; margin-right:.35em; }
.sxm-pt .sxm-pt-sep{ opacity:.3; margin-inline:.5em; }
body.sxm-post .sxm-pt + .elementor-element{ margin-top:clamp(14px,1.6vw,22px); }
/* ---- end of article ---- */
.sxm-pf{ padding-top:0 !important; padding-bottom:calc(84*var(--u)) !important; } /* band end lands at 100 like every other CTA */
.sxm-bl .sxm-bl-band{ padding-top:var(--s4); }
.sxm-bl .sxm-bl-sep{ opacity:.4; margin-inline:.35em; }
.sxm-bl .sxm-bl-eyebrow a{ color:inherit; text-decoration:none; }
.sxm-bl .sxm-bl-eyebrow a:hover{ color:#fff; }
.sxm-bl .sxm-pf-head{ --dsz:74; margin-bottom:calc(40*var(--u)); }
.sxm-pf-all{ margin:calc(44*var(--u)) 0 0; }
.sxm-pf-all a{
display:inline-flex; align-items:center; gap:.6em;
font-family:var(--sxm-wide); font-weight:500;
font-size:clamp(11px,calc(12*var(--u)),13px); letter-spacing:.14em; text-transform:uppercase;
color:#fff; text-decoration:none; padding-top:calc(16*var(--u));
border-top:1px solid var(--hair);
}
.sxm-pf-all a:hover{ opacity:.7; }
.sxm-pf-cta{ text-align:center; }
.sxm-bl .sxm-pf-ctahead{
--lu:calc(100cqi / 1360); --capmid:.9808; --dsz:140; --wtrk:-.04em;
display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
gap:0 calc(11*var(--lu)); line-height:calc(137/157);
margin:0 0 calc(40*var(--u)); text-transform:uppercase; color:#fff;
}
.sxm-bl .sxm-pf-ctahead .l{ display:flex; align-items:baseline; justify-content:center;
gap:calc(11*var(--lu)); flex:0 0 auto; }
.sxm-bl .sxm-pf-ctahead i{ font-style:normal; white-space:nowrap; }
.sxm-bl .sxm-pf-ctahead .d{ font-family:var(--sxm-display); font-weight:900;
font-size:calc(var(--dsz) * var(--capmid) * var(--lu)); letter-spacing:0; }
.sxm-bl .sxm-pf-ctahead .w{ font-family:var(--sxm-wide); font-weight:500;
font-size:calc(var(--dsz) * var(--capmid) * 1.1543 * var(--lu)); letter-spacing:var(--wtrk); }
.sxm-pf-sub{
font-family:'Nord Regular',sans-serif;
font-size:clamp(12px,calc(18*var(--u)),19px); line-height:calc(30/18);
letter-spacing:.19em; text-transform:uppercase; color:rgba(255,255,255,.7);
max-width:34ch; margin:0 auto calc(46*var(--u));
}
.sxm-pf-note{
font-family:'Nord Regular',sans-serif;
font-size:clamp(9px,calc(10*var(--u)),11px); line-height:30px;
letter-spacing:.19em; text-transform:uppercase; color:var(--accent);
margin:calc(32*var(--u)) 0 0;
}
/* the form: the /marketing/ grid, restated — GF's theme reset unsets height, so the
button and inputs are sized with !important padding (CLAUDE.md §20.4b) */
.sxm-pf-form{ text-align:left; }
.sxm-pf-form .gform_wrapper .gform_fields{
display:grid !important; grid-template-columns:681fr 676fr;
grid-template-rows:repeat(3,minmax(0,1fr)); align-items:stretch;
height:clamp(240px,calc(280*var(--u)),290px);
grid-column-gap:clamp(3px,calc(5*var(--u)),6px); grid-row-gap:clamp(3px,calc(5*var(--u)),6px);
}
.sxm-pf-form .gform_wrapper .gfield{ grid-column:1; display:flex; flex-direction:column;
min-height:0; margin:0 !important; padding:0 !important; }
.sxm-pf-form .gform_wrapper .gfield:has(textarea){ grid-column:2; grid-row:1 / span 3; }
.sxm-pf-form .gform_wrapper .gfield_label{ display:none !important; }
.sxm-pf-form .gform_wrapper .gfield > .ginput_container{ flex:1 1 auto; display:flex; min-height:0; margin:0 !important; }
.sxm-pf-form .gform_wrapper input[type=text],
.sxm-pf-form .gform_wrapper input[type=email],
.sxm-pf-form .gform_wrapper input[type=tel],
.sxm-pf-form .gform_wrapper textarea{
width:100%; height:100% !important; background:#232323 !important; border:0 !important; border-radius:0;
color:#fff !important; font-family:var(--sxm-copy); font-weight:400;
font-size:clamp(13px,calc(15*var(--u)),16px); padding:0 clamp(16px,calc(30*var(--u)),31px); resize:none;
}
.sxm-pf-form .gform_wrapper .gfield:first-child input{ border-top-left-radius:10px; }
.sxm-pf-form .gform_wrapper .gfield:nth-child(3) input{ border-bottom-left-radius:10px; }
.sxm-pf-form .gform_wrapper textarea{ border-radius:0 10px 10px 0;
padding-top:clamp(16px,calc(33*var(--u)),34px); line-height:calc(24/15); }
.sxm-pf-form .gform_wrapper ::placeholder{ color:rgba(255,255,255,.5); opacity:1; }
.sxm-pf-form .gform_wrapper .gform_footer{ margin:clamp(8px,calc(20*var(--u)),21px) 0 0 !important;
padding:0 !important; width:100%; }
.sxm-pf-form .gform_wrapper .gform_footer input[type=submit]{
display:block; width:100% !important; padding:calc(30*var(--u)) 0 !important;
background:#fff !important; color:#000 !important; border:0 !important; border-radius:6px !important;
font-family:'Nord Medium','Nord Regular',sans-serif !important; font-weight:500 !important;
font-size:clamp(15px,calc(28*var(--u)),29px) !important; line-height:1.2;
text-align:center; white-space:normal; text-transform:uppercase; cursor:pointer;
box-shadow:inset 0 0 0 2px #fff !important;
transition:background-color .25s ease, color .25s ease;
}
/* Hover inverts the button (black ground, white type, white ring) instead of the old gold
wash. The ring is an INSET box-shadow, not a border, so nothing shifts by 4px on hover. */
.sxm-pf-form .gform_wrapper .gform_footer input[type=submit]:hover{
background:#000 !important; color:#fff !important; }
.sxm-pf-form .gform_wrapper .gform_footer input[type=submit]:focus-visible{
outline:3px solid #fff; outline-offset:3px; }
@media (max-width:1024px){ .sxm-bl .sxm-pf-head{ --dsz:74; } }
@media (max-width:767px){
.sxm-bl .sxm-pf-head{ --dsz:150; }
/* ⚠ flex-direction on the HEAD does nothing — both words live inside a single .l row,
so the stacking has to happen there. And 230 was a re-based --dsz: it put the row at
432px in a 390 viewport. 250 stacked makes the longest word fill the phone measure. */
.sxm-bl .sxm-pf-ctahead{ --dsz:250; }
.sxm-bl .sxm-pf-ctahead .l{ flex-direction:column; align-items:center; gap:0; }
.sxm-pf-form .gform_wrapper .gform_fields{ grid-template-columns:1fr; grid-template-rows:none;
height:auto; grid-row-gap:4px; }
.sxm-pf-form .gform_wrapper .gfield,
.sxm-pf-form .gform_wrapper .gfield:has(textarea){ grid-column:1; grid-row:auto; }
.sxm-pf-form .gform_wrapper .gfield input{ height:auto !important; padding:19px 20px !important; line-height:1.35 !important; font-size:15px !important; border:0 !important;
border-radius:0 !important; }
.sxm-pf-form .gform_wrapper .gfield:first-child input{ border-radius:10px 10px 0 0 !important; }
.sxm-pf-form .gform_wrapper textarea{ height:180px !important; padding:19px 20px !important;
border-radius:0 0 10px 10px; }
.sxm-pf-form .gform_wrapper .gform_footer input[type=submit]{ padding:20px 0 !important; font-size:18px !important; }
.sxm-pf-note{ margin-top:24px; }
.sxm-pt{ padding-top:16px; }
}
/* The single-post Theme Builder template's own container carries Elementor's default
10px gutter, which shows as a black rim down both sides of the full-bleed hero. */
body.sxm-post .elementor-location-single > .e-con{ padding-inline:0 !important; }
/* =============================================================================
[sxm_latest_posts] — the "latest from the blog" band, for any page.
It reuses the index's card wholesale (that is the point: one blog design across
the site), so it only has to supply the head row and its own vertical rhythm.
Note the band is BOTH .sxm-bl (which owns container-type and therefore --u) and
.sxm-lp; the unit must not be re-declared on a narrower descendant or every child
re-resolves it against the wrong container (CLAUDE.md 19, T-14).
========================================================================== */
.sxm-bl.sxm-lp{ padding-top:calc(74*var(--u)); padding-bottom:calc(74*var(--u)); }
/* Lockup left, "All articles" parked on the baseline at the right edge — the same
head row the section titles on /faq/ and /work/ use. */
.sxm-bl.sxm-lp .sxm-lp-head{
display:flex; align-items:flex-end; justify-content:space-between;
gap:calc(40*var(--u)); margin-bottom:calc(46*var(--u));
}
.sxm-bl.sxm-lp .sxm-bl-lock{ --dsz:96; margin-bottom:0; }
.sxm-bl.sxm-lp .sxm-lp-all{
flex:0 0 auto; display:inline-flex; align-items:center; gap:calc(10*var(--u));
font-family:var(--sxm-wide); font-weight:500;
font-size:clamp(11px,calc(13*var(--u)),14px); line-height:1;
letter-spacing:.14em; text-transform:uppercase;
color:var(--muted); text-decoration:none;
padding-bottom:calc(6*var(--u)); border-bottom:1px solid var(--hair);
transition:color .25s ease, border-color .25s ease;
}
.sxm-bl.sxm-lp .sxm-lp-all:hover,
.sxm-bl.sxm-lp .sxm-lp-all:focus-visible{ color:var(--ink); border-color:var(--ink); }
.sxm-bl.sxm-lp .sxm-lp-all .sxm-bl-arrow{ width:14px; height:14px; }
.sxm-bl.sxm-lp .sxm-lp-all .sxm-bl-arrow svg{ width:14px; height:14px; }
/* The band is an inclusion, not the page's subject: it never runs a lead card and its
row gap can be tighter than the index's. */
@media (max-width:1024px){
/* (grid-era rule removed 2026-09-09: the band is a carousel now, see THE CAROUSEL below) */
}
@media (max-width:767px){
.sxm-bl.sxm-lp{ padding-top:44px; padding-bottom:44px; }
/* ⚠ .sxm-bl.sxm-lp .sxm-bl-lock is (0,3,0) and BEATS the index's own mobile rule
`.sxm-bl .sxm-bl-lock{--dsz:168; flex-direction:column}` at (0,2,0). Without
restating both here the band kept its desktop --dsz:96 on a phone and the lockup
rendered 141px wide in a 350px measure. Exactly the trap in CLAUDE.md 21.5 —
a more specific component rule silently disables the shared mobile sizing. */
.sxm-bl.sxm-lp .sxm-bl-lock{ --dsz:204; flex-direction:column; align-items:flex-start; gap:0; }
.sxm-bl.sxm-lp .sxm-lp-head{ flex-direction:column; align-items:flex-start; gap:18px;
margin-bottom:30px; }
}
/* =============================================================================
THE INDEX (2026-09-02). The featured images all carry their own titles, so a
card grid read double-titled. Now: the lead as a type-led feature with an
inked visual, then every post as a full-width row — number, title, excerpt,
meta, a small inked swatch — inverting to white on hover like the sub-page
rows, with a sharp full-colour preview riding the cursor on fine pointers.
========================================================================== */
/* the lead: type first, image as a blurred duotone panel (in-image text dissolves) */
.sxm-bl .sxm-bl-card--lead .sxm-bl-link{
grid-template-columns:1fr calc(440*var(--u)); column-gap:calc(64*var(--u)); align-items:center;
}
.sxm-bl .sxm-bl-card--lead .sxm-bl-body{ order:1; }
.sxm-bl .sxm-bl-card--lead .sxm-bl-media{ order:2; aspect-ratio:3/2; border-radius:4px; }
.sxm-bl .sxm-bl-card--lead .sxm-bl-media img{
filter:grayscale(1) contrast(1.45) brightness(.42) blur(4px); transform:scale(1.02);
}
.sxm-bl .sxm-bl-card--lead .sxm-bl-media::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.62) 100%);
pointer-events:none; transition:opacity .45s ease;
}
.sxm-bl .sxm-bl-card--lead .sxm-bl-link:hover .sxm-bl-media img,
.sxm-bl .sxm-bl-card--lead .sxm-bl-link:focus-visible .sxm-bl-media img{ filter:none; transform:scale(1); }
.sxm-bl .sxm-bl-card--lead .sxm-bl-link:hover .sxm-bl-media::after{ opacity:0; }
.sxm-bl .sxm-bl-card--lead .sxm-bl-title{
font-size:clamp(30px,calc(62*var(--u)),66px); line-height:1.02; letter-spacing:-.045em;
}
.sxm-bl .sxm-bl-card--lead .sxm-bl-link:hover .sxm-bl-title{ text-decoration:none; }
/* the rows */
.sxm-bl .sxm-bl-list{ border-top:1px solid var(--hair); }
.sxm-bl .sxm-bl-row{ margin:0; position:relative; border-bottom:1px solid var(--hair); }
.sxm-bl .sxm-bl-rowlink{
--row-desc:var(--muted); --row-meta:var(--dim);
display:grid; grid-template-columns:calc(64*var(--u)) 1fr calc(280*var(--u)) calc(120*var(--u)) 28px;
align-items:center; column-gap:calc(24*var(--u));
padding:calc(26*var(--u)) calc(14*var(--u));
text-decoration:none; color:var(--ink);
transition:color .25s ease;
}
.sxm-bl .sxm-bl-rowlink::before{
content:''; position:absolute; inset:0 min(calc(-1 * var(--bl-pad)), calc(50% - 50vw)); /* edge to edge at every width */
background:#fff; opacity:0; transition:opacity .25s ease;
}
.sxm-bl .sxm-bl-rowlink > *{ position:relative; }
.sxm-bl .sxm-bl-rowlink:hover,
.sxm-bl .sxm-bl-rowlink:focus-visible{ color:#000; --row-desc:rgba(0,0,0,.66); --row-meta:rgba(0,0,0,.5); outline:none; }
.sxm-bl .sxm-bl-rowlink:hover::before,
.sxm-bl .sxm-bl-rowlink:focus-visible::before{ opacity:1; }
.sxm-bl .sxm-bl-rown{ font-family:var(--sxm-mono); font-size:13px; letter-spacing:2px; color:var(--row-meta); }
.sxm-bl .sxm-bl-rowtitle{
font-family:var(--sxm-copy); font-weight:700; /* SXM FONT SUBSTITUTE: Circular Std Black */
font-size:clamp(20px,calc(30*var(--u)),32px); line-height:1.12; letter-spacing:-.03em;
color:inherit; margin:0; text-wrap:balance;
}
.sxm-bl .sxm-bl-rowex{
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
font-family:var(--sxm-copy); font-weight:300;
font-size:clamp(13px,calc(15*var(--u)),16px); line-height:1.5;
color:var(--row-desc); margin-top:7px; max-width:64ch;
}
.sxm-bl .sxm-bl-rowmeta{
display:flex; flex-direction:column; gap:5px;
font-family:var(--sxm-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase;
color:var(--row-meta); line-height:1.5;
}
.sxm-bl .sxm-bl-rowcat{ font-weight:400; color:inherit; }
.sxm-bl .sxm-bl-rowthumb{
display:block; aspect-ratio:3/2; overflow:hidden; border-radius:3px; background:#151515;
}
.sxm-bl .sxm-bl-rowthumb img{
width:100%; height:100%; object-fit:cover; display:block;
filter:grayscale(1) contrast(1.35) brightness(.62) blur(1px); transform:scale(1.06);
transition:filter .35s ease, transform .5s ease;
}
.sxm-bl .sxm-bl-rowlink:hover .sxm-bl-rowthumb img{ filter:none; transform:scale(1); }
.sxm-bl .sxm-bl-rowarrow{ width:14px; height:14px; opacity:.45; transition:opacity .25s ease, transform .3s ease; }
.sxm-bl .sxm-bl-rowarrow svg{ width:100%; height:100%; display:block; }
.sxm-bl .sxm-bl-rowlink:hover .sxm-bl-rowarrow{ opacity:1; transform:translate(3px,-3px); }
/* the preview riding the cursor (fine pointers only; blog.js gates it) */
.sxm-bl .sxm-bl-peek{
position:fixed; left:0; top:0; z-index:90; pointer-events:none;
width:clamp(220px,22vw,320px); aspect-ratio:16/10; border-radius:6px; overflow:hidden;
opacity:0; transition:opacity .22s ease;
box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14);
background:#151515;
}
.sxm-bl .sxm-bl-peek img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.1); transition:transform .5s cubic-bezier(.16,.84,.44,1); }
.sxm-bl .sxm-bl-peek.is-on{ opacity:1; }
.sxm-bl .sxm-bl-peek.is-on img{ transform:none; }
@media (max-width:1024px){
.sxm-bl .sxm-bl-rowlink{ grid-template-columns:44px 1fr 170px 96px 22px; column-gap:16px; }
.sxm-bl .sxm-bl-card--lead .sxm-bl-link{ grid-template-columns:1fr; row-gap:24px; }
.sxm-bl .sxm-bl-card--lead .sxm-bl-media{ order:1; aspect-ratio:3/2; }
.sxm-bl .sxm-bl-card--lead .sxm-bl-body{ order:2; }
}
@media (max-width:767px){
.sxm-bl .sxm-bl-rowlink{
grid-template-columns:1fr 84px; grid-template-areas:"meta thumb" "title thumb";
column-gap:14px; row-gap:6px; padding:18px 6px; align-items:start;
}
.sxm-bl .sxm-bl-rown,.sxm-bl .sxm-bl-rowarrow,.sxm-bl .sxm-bl-rowex{ display:none; }
.sxm-bl .sxm-bl-rowmeta{ grid-area:meta; flex-direction:row; flex-wrap:wrap; gap:0 10px; font-size:10px; }
.sxm-bl .sxm-bl-rowmain{ grid-area:title; }
.sxm-bl .sxm-bl-rowthumb{ grid-area:thumb; align-self:center; }
.sxm-bl .sxm-bl-rowtitle{ font-size:19px; }
.sxm-bl .sxm-bl-rowlink::before{ inset:0 min(-20px, calc(50% - 50vw)); }
.sxm-bl .sxm-bl-card--lead .sxm-bl-title{ font-size:30px; }
}
@media (prefers-reduced-motion:reduce){
.sxm-bl .sxm-bl-peek{ display:none; }
.sxm-bl .sxm-bl-rowthumb img,.sxm-bl .sxm-bl-card--lead .sxm-bl-media img{ transition:none; }
}
/* phone: 40px between the fixed bar and the post crumb, the site-wide standard */
@media (max-width:767px){ .sxm-pt{ padding-top:40px; } }
/* audit 2026-09-02: 21px-tall text links get a 44px tap box on touch screens */
@media (max-width:1024px){ .sxm-bl .sxm-lp-all, .sxm-bl .sxm-pf-all a, .sxm-lp .sxm-lp-all a{ display:inline-block; padding:10px 0; } }
/* ------------------------------------------------------------ search state
The search page renders through the archive component; it needs its own field so a
visitor can refine without going back to the browser bar. */
.sxm-bl .sxm-bl-search{ margin: calc(24*var(--u)) 0 0; max-width: 620px; }
.sxm-bl .sxm-bl-search-lab{
display:block; font-family:var(--sxm-mono); font-size:11px; letter-spacing:2.4px;
text-transform:lowercase; color:var(--dim); margin-bottom:10px;
}
.sxm-bl .sxm-bl-search-row{ display:flex; gap:8px; }
.sxm-bl .sxm-bl-search input[type="search"]{
flex:1 1 auto; min-width:0; height:56px; background:#151515; border:0; border-radius:6px;
color:var(--ink); font-family:var(--sxm-copy); font-size:16px; padding:0 18px;
-webkit-appearance:none; appearance:none;
}
.sxm-bl .sxm-bl-search input[type="search"]::placeholder{ color:var(--dim); opacity:1; }
.sxm-bl .sxm-bl-search input[type="search"]:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.sxm-bl .sxm-bl-search button[type="submit"]{
flex:0 0 auto; height:56px; padding:0 26px; border:0 !important; border-radius:6px !important;
background:#fff !important; color:#000 !important;
font-family:var(--sxm-wide); font-weight:500; font-size:13px; letter-spacing:.14em;
text-transform:uppercase; cursor:pointer; white-space:nowrap;
box-shadow:inset 0 0 0 2px #fff !important;
transition:background-color .25s ease, color .25s ease;
}
.sxm-bl .sxm-bl-search button[type="submit"]:hover,
.sxm-bl .sxm-bl-search button[type="submit"]:focus-visible{ background:#000 !important; color:#fff !important; }
@media (max-width:600px){
.sxm-bl .sxm-bl-search-row{ flex-direction:column; }
.sxm-bl .sxm-bl-search button[type="submit"]{ width:100%; }
}
/* ---------------------------------------------------------------- standfirst
The old theme set a post's subtitle as an , which put an h5 straight after the h1 on
32 posts. It is a standfirst, not a heading: a
set larger and lighter than the body,
sitting between the title and the first section. (2026-09-03 SEO audit) */
body.sxm-post .elementor-element-49c538c .sxm-standfirst .elementor-heading-title,
body.sxm-post .sxm-standfirst .elementor-heading-title{
font-family:var(--sxm-copy); font-weight:300; font-size:clamp(19px,1.6vw,24px); line-height:1.5;
color:rgba(255,255,255,.78); letter-spacing:0; text-transform:none; margin:0 0 1.2em;
}
/* ==========================================================================
THE CAROUSEL — Rob's card, the title OVER the image (back on 2026-09-21 at the team's request; §54).
Desktop: THREE whole cards fill the measure (his frame: 447 + 10 + 447 + 10 + 447 = 1360), the
middle one active under a white hairline, nothing cut at either edge. Tablet: the active card
centred with its neighbours peeking. Phone: one card per view.
THE THUMBNAILS carry their own big baked-in headlines, so the image is never shown as a picture.
It becomes a field of tone: greyscale, blurred in proportion to the card (--cw, set by blog.js),
dark, under a veil that is darkest where the title sits. A light-ground thumbnail is inverted
first (.is-light, measured once per attachment in PHP), so every card is the same thing: a black
field with soft luminous forms. The blur NEVER relaxes on hover: sharpening would bring the baked
lettering up behind the real title. The brightest pixel the image can reach is brightness x 255,
and the veil takes the title zone down again, so white type holds well past 10:1 on every card.
Vars live on the strip. Without JS: a plain scrollable strip.
========================================================================== */
.sxm-bl .sxm-lp-car{
--per:3; --gap:10px; --card:calc((100% - 2 * var(--gap)) / 3); /* blog.js rounds --card to whole pixels */
position:relative; outline:none; touch-action:pan-y; overflow:hidden;
-webkit-user-select:none; user-select:none;
}
.sxm-bl .sxm-lp-car:not(.is-ready){ overflow-x:auto; scrollbar-width:none; }
.sxm-bl .sxm-lp-car:not(.is-ready)::-webkit-scrollbar{ display:none; }
.sxm-bl .sxm-lp-car:not(.is-ready) + .sxm-lp-nav{ display:none; }
.sxm-bl .sxm-lp-track{ display:flex; align-items:stretch; gap:var(--gap); will-change:transform; transition:transform .7s cubic-bezier(.22,.86,.24,1); }
.sxm-bl .sxm-lp-car.is-drag .sxm-lp-track, .sxm-bl .sxm-lp-car.is-jump .sxm-lp-track{ transition:none; }
.sxm-bl .sxm-lp-slide{
--inv:0; --br:.62;
position:relative; flex:0 0 var(--card); aspect-ratio:5/4; max-height:520px; /* wide screens: the card grows wider, not taller */
border-radius:6px; overflow:hidden; background:#060606; isolation:isolate; transform:translateZ(0);
}
.sxm-bl .sxm-lp-slide.is-light{ --inv:1; --br:.66; } /* an inverted white ground is pure black: its forms take a touch more light */
.sxm-bl .sxm-lp-slide.is-active{ --br:.70; }
.sxm-bl .sxm-lp-slide.is-light.is-active{ --br:.74; }
/* the hairline lives on a layer ABOVE the image: an inset shadow on the card itself paints under its children */
.sxm-bl .sxm-lp-slide::after{
content:""; position:absolute; inset:0; z-index:4; border-radius:inherit; pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); transition:box-shadow .5s ease;
}
.sxm-bl .sxm-lp-slide.is-active::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.80); }
.sxm-bl .sxm-lp-car:focus-visible .sxm-lp-slide.is-active::after,
.sxm-bl .sxm-lp-slide:has(.sxm-lp-link:focus-visible)::after{ box-shadow:inset 0 0 0 2px #fff; }
.sxm-bl .sxm-lp-link{ position:absolute; inset:0; display:block; color:#fff; text-decoration:none; -webkit-user-drag:none; outline:none; }
.sxm-bl .sxm-lp-img{
position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; margin:0; border:0; border-radius:0; max-width:none;
pointer-events:none; -webkit-user-drag:none;
transform:scale(1.2); /* the blur fades toward its own edge: keep that edge outside the card */
filter:grayscale(1) invert(var(--inv)) blur(14px) brightness(var(--br)) contrast(1.5);
filter:grayscale(1) invert(var(--inv)) blur(calc(var(--cw, 450px) * .032)) brightness(var(--br)) contrast(1.5);
transition:filter .7s ease, transform 1.4s cubic-bezier(.22,.86,.24,1);
}
.sxm-bl .sxm-lp-veil{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:
radial-gradient(ellipse 64% 54% at 50% 50%, rgba(0,0,0,.74) 0%, rgba(0,0,0,.50) 55%, rgba(0,0,0,.12) 100%),
linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 100%);
}
.sxm-bl .sxm-lp-t{
position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; width:68%; margin:0; text-align:center;
font-family:var(--sxm-copy); font-weight:500; font-size:clamp(17px, calc(22*var(--u)), 30px); line-height:1.26;
letter-spacing:-.012em; color:#fff; text-transform:none; text-wrap:balance;
text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 26px rgba(0,0,0,.65);
display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.sxm-bl .sxm-lp-go{
position:absolute; z-index:3; top:clamp(14px, calc(17*var(--u)), 24px); right:clamp(14px, calc(17*var(--u)), 24px);
width:clamp(20px, calc(24*var(--u)), 32px); aspect-ratio:1; color:#fff; display:block;
transition:transform .4s cubic-bezier(.22,.86,.24,1);
}
.sxm-bl .sxm-lp-go svg{ width:100%; height:100%; display:block; overflow:visible; }
.sxm-bl .sxm-lp-meta{
position:absolute; z-index:2; left:clamp(14px, calc(18*var(--u)), 24px); bottom:clamp(12px, calc(16*var(--u)), 22px);
display:flex; gap:14px; font-family:var(--sxm-mono); font-size:10.5px; line-height:1.4; letter-spacing:2px;
text-transform:uppercase; color:rgba(255,255,255,.56);
}
.sxm-bl .sxm-lp-meta b{ font-weight:400; color:rgba(255,255,255,.78); }
@media (hover:hover){
.sxm-bl .sxm-lp-link:hover .sxm-lp-img{ --br:.82; transform:scale(1.27); }
.sxm-bl .sxm-lp-slide.is-light .sxm-lp-link:hover .sxm-lp-img{ --br:.86; }
.sxm-bl .sxm-lp-link:hover .sxm-lp-go{ transform:translate(4px,-4px); }
.sxm-bl .sxm-lp-slide:not(.is-active):hover::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.42); }
}
.sxm-bl .sxm-lp-link:focus-visible .sxm-lp-go{ transform:translate(4px,-4px); }
/* nav: prev · dots · next, centred under the strip */
.sxm-bl .sxm-lp-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:calc(30*var(--u)); }
.sxm-bl .sxm-lp-dots{ display:flex; align-items:center; gap:10px; }
.sxm-bl .sxm-lp-dot{
width:8px; height:8px; border-radius:999px; padding:0; border:0; margin:0; cursor:pointer; font-size:0;
background:rgba(255,255,255,.28); transition:width .35s cubic-bezier(.22,.86,.24,1), background .3s ease;
}
.sxm-bl .sxm-lp-dot:not([aria-current]):hover{ background:rgba(255,255,255,.6); }
.sxm-bl .sxm-lp-dot[aria-current="true"]{ width:28px; background:linear-gradient(90deg, #fff calc(var(--p,0) * 100%), rgba(255,255,255,.32) 0); }
.sxm-bl .sxm-lp-dot:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.sxm-bl .sxm-lp-btn{
width:36px; height:36px; border-radius:50%; padding:0; margin:0; cursor:pointer;
border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff;
display:inline-flex; align-items:center; justify-content:center;
transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.sxm-bl .sxm-lp-btn svg{ width:14px; height:14px; }
.sxm-bl .sxm-lp-btn--next svg{ transform:scaleX(-1); }
.sxm-bl .sxm-lp-btn:hover, .sxm-bl .sxm-lp-btn:focus-visible{ background:#fff; color:#000; border-color:#fff; outline:none; }
@media (max-width:1280px){
.sxm-bl .sxm-lp-t{ width:76%; } /* a 320-400px card: the title takes more of it */
}
@media (max-width:1024px){
/* tablet: three across would be 236px cards; the active card is centred, its neighbours peek, edge to edge */
.sxm-bl .sxm-lp-car{ --per:0; --gap:12px; --card:clamp(320px, 58vw, 600px); margin-inline:min(calc(-1 * var(--bl-pad)), calc(50% - 50vw)); }
.sxm-bl .sxm-lp-car:not(.is-ready){ padding-inline:var(--bl-pad); }
.sxm-bl .sxm-lp-t{ width:72%; font-size:clamp(19px, 2.7vw, 26px); }
}
@media (max-width:767px){
/* phone: one card per view, inside the measure */
.sxm-bl .sxm-lp-car{ --per:1; --gap:12px; --card:100%; margin-inline:0; }
.sxm-bl .sxm-lp-car:not(.is-ready){ padding-inline:0; }
.sxm-bl .sxm-lp-t{ width:82%; font-size:19px; line-height:1.28; }
.sxm-bl .sxm-lp-meta{ font-size:10px; }
.sxm-bl .sxm-lp-nav{ margin-top:22px; }
.sxm-bl .sxm-lp-btn{ width:40px; height:40px; }
}
@media (prefers-reduced-motion:reduce){
.sxm-bl .sxm-lp-track, .sxm-bl .sxm-lp-img, .sxm-bl .sxm-lp-slide::after, .sxm-bl .sxm-lp-dot, .sxm-bl .sxm-lp-go{ transition:none; }
}
/* A table in an article is wider than a phone (the audit's one flag, 2026-09-09): it scrolls inside
its own box instead of widening the page and pushing everything below it off centre. */
body.sxm-post .elementor-location-single table,
body.sxm-post .elementor-widget-theme-post-content table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; }
body.sxm-post .elementor-location-single table::-webkit-scrollbar,
body.sxm-post .elementor-widget-theme-post-content table::-webkit-scrollbar{ height:6px; }
body.sxm-post .elementor-location-single table::-webkit-scrollbar-thumb,
body.sxm-post .elementor-widget-theme-post-content table::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:3px; }
body.sxm-post .elementor-location-single pre,
body.sxm-post .elementor-widget-theme-post-content pre{ max-width:100%; overflow-x:auto; }
/* ===================== GO-LIVE FIXES (2026-09-22, §58) =====================
White-era colours that survived inside the 137 posts' own trees. The article ground is black:
1. 112 posts carry heading widgets with title_color:#000 baked in ((0,4,1) per-element rules) and bare
/ inside text-editor widgets falling to the kit's black h2 — 728 invisible section titles.
2. 18 posts render a light "Summary:" card (inline background-color:#f4f4f4) whose text inherits white.
3. 8 posts embed a white-card FAQ accordion (.faq-container) with its own inline stylesheet. */
body.sxm-post .elementor-location-single .elementor-widget-heading .elementor-heading-title,
body.sxm-post .elementor-location-single .elementor-widget-text-editor :is(h1,h2,h3,h4,h5,h6),
body.sxm-post .elementor-location-single .elementor-widget-html :is(h1,h2,h3,h4,h5,h6):not(.faq-question){ color:#fff !important; }
body.sxm-post .elementor-location-single div[style*="background-color: #f"],
body.sxm-post .elementor-location-single div[style*="background-color:#f"],
body.sxm-post .elementor-location-single div[style*="background: #f"]{ background:#161616 !important; border:1px solid rgba(255,255,255,.12); color:#fff; }
body.sxm-post .elementor-location-single div[style*="background-color: #f"] a{ color:#fff; text-decoration:underline; text-underline-offset:.16em; }
/* the legacy FAQ widget, in the house accordion language (dark rows, hairline, white type, white on hover) */
body.sxm-post .elementor-location-single .faq-container{ max-width:none; margin:40px 0; font-family:inherit; }
body.sxm-post .elementor-location-single .faq-container .faq-title{ text-align:left; color:#fff; font-family:'Nord Medium', sans-serif; font-weight:500; font-size:30px; letter-spacing:.02em; margin:0 0 24px; }
body.sxm-post .elementor-location-single .faq-item{ background:#161616; border:1px solid rgba(255,255,255,.14); border-radius:12px; margin-bottom:10px; overflow:hidden; box-shadow:none; transition:background .25s ease, border-color .25s ease; }
body.sxm-post .elementor-location-single .faq-item:hover{ box-shadow:none; border-color:rgba(255,255,255,.4); }
body.sxm-post .elementor-location-single .faq-question{ background:transparent; color:#fff; font-family:inherit; font-size:17px; font-weight:500; padding:18px 22px; }
body.sxm-post .elementor-location-single .faq-question:hover,
body.sxm-post .elementor-location-single .faq-question.active{ background:#fff; color:#000; }
body.sxm-post .elementor-location-single .faq-icon{ color:currentColor; }
body.sxm-post .elementor-location-single .faq-answer{ background:transparent; padding:0 22px; }
body.sxm-post .elementor-location-single .faq-answer.active{ padding:16px 22px 20px; max-height:900px; }
body.sxm-post .elementor-location-single .faq-answer p{ color:rgba(255,255,255,.72); font-size:16px; line-height:1.6; }