/* ============================================================
   Sicc Media blog. Same palette, type and motion as the homepage.
   --acc is set per page by functions.php: on a pillar archive it is
   that pillar's colour, on a post it is that post's pillar colour.
   ============================================================ */

:root{
  --void:#050505; --panel:#0C0C0C; --panel2:#141414; --line:#232323;
  --bone:#EBEBEB; --mute:#8F8F8F;
  --lime:#BCFF00; --pink:#FF2ECC; --cyan:#00E0FF;
  --purple:#B026FF; --orange:#FF6A00; --yellow:#FFC400;
  --acc:var(--lime);
  --disp:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --lab:"Anybody","Archivo Narrow",-apple-system,"Segoe UI Condensed",Roboto,sans-serif;
  /* Anybody is a variable font with a width axis. 72% is the condensed
     setting the earlier Sicc Media build used. */
  --lab-wdth:72;
  --pad:clamp(20px,5vw,64px);
  --maxw:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
}

body{background:var(--void);color:var(--bone);font-family:var(--disp);
  -webkit-font-smoothing:antialiased}
::selection{background:var(--acc);color:var(--void)}

/* ---------- the filter strip ---------- */
.sx-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 0 18px;border-bottom:1px solid var(--line);margin-bottom:34px;
}
.sx-strip-lab{
  font-family:var(--lab);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);margin-right:6px;
}
.sx-chip{
  --c:var(--lime);
  display:inline-flex;align-items:baseline;gap:7px;
  padding:7px 13px;border:1px solid var(--line);background:var(--panel);
  font-family:var(--lab);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bone);text-decoration:none;
  transition:border-color .2s var(--ease),color .2s var(--ease),
             background .2s var(--ease),transform .2s var(--ease);
}
.sx-chip b{font-size:10px;color:var(--mute);font-weight:700}
.sx-chip:hover{border-color:var(--c);color:var(--c);transform:translateY(-2px)}
.sx-chip:hover b{color:var(--c)}
/* the pillar you are already reading: filled, and not a link to itself */
.sx-chip.is-on{background:var(--c);border-color:var(--c);color:var(--void);cursor:default}
.sx-chip.is-on b{color:var(--void);opacity:.65}

/* ---------- the six pillar cards on the hub ---------- */
/* Six pillars want 3 across so they land as two even rows of three.
   auto-fit gives four and leaves two orphans on the second row. */
.sx-pillars{
  display:grid;gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:36px 0 12px;
}
@media (max-width:1000px){.sx-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sx-pillar{
  --c:var(--lime);
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:26px 24px 22px;background:var(--panel);
  border:1px solid var(--line);border-top:3px solid var(--c);
  text-decoration:none;color:var(--bone);overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease),
             background .35s var(--ease);
}
/* a wash of the pillar colour that rises on hover */
.sx-pillar::after{
  content:"";position:absolute;inset:auto 0 0 0;height:100%;
  background:linear-gradient(0deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 62%);
  transform:translateY(100%);transition:transform .45s var(--ease);
  pointer-events:none;
}
.sx-pillar:hover{transform:translateY(-4px);border-color:var(--c);background:var(--panel2)}
.sx-pillar:hover::after{transform:translateY(0)}
.sx-pillar-n{
  font-family:var(--lab);font-size:11px;font-weight:700;letter-spacing:.22em;
  color:var(--c);
}
.sx-pillar-n::after{content:" articles";color:var(--mute);letter-spacing:.16em}
.sx-pillar-t{
  font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.05;
  letter-spacing:-.02em;color:var(--bone);
}
.sx-pillar-b{font-size:14px;line-height:1.55;color:var(--mute);max-width:40ch}
.sx-pillar-go{
  margin-top:6px;font-family:var(--lab);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c);
  transition:transform .3s var(--ease);
}
.sx-pillar:hover .sx-pillar-go{transform:translateX(5px)}

/* ---------- archive + post listings ---------- */
.sx-head{padding:clamp(40px,7vw,78px) 0 0}
.sx-kicker{
  font-family:var(--lab);font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--acc);display:block;margin-bottom:12px;
}
.sx-title{
  font-size:clamp(38px,6.6vw,76px);font-weight:800;line-height:1;
  letter-spacing:-.03em;margin:0 0 14px;
}
.sx-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--mute);max-width:62ch;margin:0}

.wp-block-post-title a{color:var(--bone);text-decoration:none}
.wp-block-post-title a:hover{color:var(--acc)}
.wp-block-post-featured-image img{border:1px solid var(--line)}
.wp-block-post-date,.wp-block-post-terms{
  font-family:var(--lab);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);
}
.wp-block-post-excerpt__excerpt{color:var(--mute);line-height:1.62}

/* ---------- the article itself ---------- */
.sx-article{max-width:720px;margin:0 auto}
.sx-article p{font-size:1.0625rem;line-height:1.75;color:#D6D6D6}
.sx-article h2{margin:2.1em 0 .55em;font-size:clamp(24px,3vw,34px);font-weight:800;
  letter-spacing:-.018em;line-height:1.14;color:var(--bone)}
.sx-article h3{margin:1.8em 0 .45em;font-size:clamp(18px,2.1vw,22px);font-weight:700;color:var(--bone)}
.sx-article a{color:var(--acc);text-underline-offset:3px}
.sx-article ul,.sx-article ol{padding-left:1.15em;color:#D6D6D6;line-height:1.72}
.sx-article li{margin:.4em 0}
.sx-article strong{color:var(--bone)}
.sx-article img{max-width:100%;height:auto;border:1px solid var(--line)}
.sx-article hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}

/* the TL;DR block the articles already carry */
.sx-article blockquote.tldr,.sx-article .tldr{
  margin:1.8em 0;padding:18px 22px;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--acc);
}
.sx-article blockquote.tldr p{margin:0;color:var(--bone);font-size:1rem;line-height:1.6}
.sx-article blockquote{
  margin:1.8em 0;padding:4px 0 4px 22px;border-left:3px solid var(--acc);
  color:var(--bone);font-size:1.0625rem;
}
.sx-article table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.94rem}
.sx-article th,.sx-article td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.sx-article th{background:var(--panel);font-family:var(--lab);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.sx-article code{background:var(--panel2);padding:2px 6px;font-size:.9em;color:var(--acc)}
.sx-article pre{background:var(--panel);border:1px solid var(--line);padding:16px;overflow:auto}

.sx-rt{font-family:var(--lab);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}

/* ---------- pagination ---------- */
.wp-block-query-pagination{
  margin-top:48px;padding-top:26px;border-top:1px solid var(--line);
  font-family:var(--lab);letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:700;
}
.wp-block-query-pagination a{color:var(--mute);text-decoration:none}
.wp-block-query-pagination a:hover{color:var(--acc)}
.wp-block-query-pagination .current{color:var(--acc)}

/* ---------- header and footer ---------- */
.sx-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.sx-brand{font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--bone);text-decoration:none}
.sx-brand b{color:var(--acc)}
/* Each menu item owns its own hover colour, same as the homepage nav. */
.sx-nav{display:flex;gap:18px;flex-wrap:wrap}
.sx-nav a,
.sx-nav .wp-block-navigation-item__content{
  --c:var(--lime);
  font-family:var(--lab);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);text-decoration:none;
  transition:color .2s var(--ease);
}
.sx-nav a:hover,
.sx-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content{color:var(--c)}
.sx-nav a:nth-child(1),.sx-nav li:nth-child(1) .wp-block-navigation-item__content{--c:var(--lime)}
.sx-nav a:nth-child(2),.sx-nav li:nth-child(2) .wp-block-navigation-item__content{--c:var(--pink)}
.sx-nav a:nth-child(3),.sx-nav li:nth-child(3) .wp-block-navigation-item__content{--c:var(--cyan)}
.sx-nav a:nth-child(4),.sx-nav li:nth-child(4) .wp-block-navigation-item__content{--c:var(--purple)}
.sx-nav a:nth-child(5),.sx-nav li:nth-child(5) .wp-block-navigation-item__content{--c:var(--orange)}
.sx-nav a:nth-child(6),.sx-nav li:nth-child(6) .wp-block-navigation-item__content{--c:var(--yellow)}
.sx-foot{
  margin-top:70px;padding:30px 0 46px;border-top:1px solid var(--line);
  font-family:var(--lab);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.sx-foot a{color:var(--mute);text-decoration:none}
.sx-foot a:hover{color:var(--acc)}

/* ---------- motion, only where it is welcome ---------- */
@media (prefers-reduced-motion: reduce){
  .sx-pillar,.sx-pillar::after,.sx-chip,.sx-pillar-go{transition:none}
  .sx-pillar:hover{transform:none}
}

@media (max-width:640px){
  .sx-strip{gap:6px}
  .sx-chip{font-size:11px;padding:6px 10px}
  .sx-pillars{grid-template-columns:1fr}
}

/* ================= CROSSHAIR CURSOR =================
   Lifted from the homepage so the blog feels like the same site.
   Only switched on by JS (html.x-on), so if the script never runs the
   person still has a normal pointer. The reticle takes the colour of
   whatever pillar the page is tinted with. */
html.x-on,html.x-on *{cursor:none}
html.x-on input,html.x-on textarea,html.x-on select{cursor:auto}

.xhair,.xring{position:fixed;left:0;top:0;z-index:70;pointer-events:none;
  opacity:0;transition:opacity .25s var(--ease)}
html.x-live .xhair,html.x-live .xring{opacity:1}

.xhair{transform:translate3d(var(--cx,-200px),var(--cy,-200px),0)}
.xhair i{position:absolute;display:block;background:var(--xc,var(--acc));
  transition:transform .3s var(--ease),opacity .25s var(--ease),background .3s var(--ease)}
.xh-n{width:1.6px;height:11px;left:-.8px;top:-18px}
.xh-s{width:1.6px;height:11px;left:-.8px;top:7px}
.xh-w{width:11px;height:1.6px;top:-.8px;left:-18px}
.xh-e{width:11px;height:1.6px;top:-.8px;left:7px}
.xh-dot{width:4px;height:4px;border-radius:50%;left:-2px;top:-2px}

.xring{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid var(--xc,var(--acc));opacity:0;
  transform:translate3d(var(--rx,-200px),var(--ry,-200px),0) scale(var(--rs,1));
  transition:border-color .3s var(--ease),opacity .25s var(--ease)}
html.x-live .xring{opacity:.42}

/* over anything clickable: ring opens, ticks swing out and turn 45 degrees */
html.x-hot .xh-n{transform:translateY(-7px) rotate(45deg)}
html.x-hot .xh-s{transform:translateY(7px) rotate(45deg)}
html.x-hot .xh-w{transform:translateX(-7px) rotate(45deg)}
html.x-hot .xh-e{transform:translateX(7px) rotate(45deg)}
html.x-hot .xh-dot{transform:scale(.5);opacity:.5}
html.x-hot .xring{--rs:1.5;opacity:.85}
html.x-down .xring{--rs:.72;opacity:1}
html.x-down .xh-dot{transform:scale(1.6)}

/* over a filled chip the accent disappears into itself, so go black */
html.x-dark{--xc:#050505}
html.x-dark .xring{border-color:#050505}
html.x-dark .xhair i{background:#050505}

@media (prefers-reduced-motion: reduce){
  .xhair i,.xring{transition:opacity .2s linear}
}
@media (hover:none),(pointer:coarse){
  .xhair,.xring{display:none}
  html.x-on,html.x-on *{cursor:auto}
}

/* ================= READING MODE =================
   A light/dark toggle for the article itself, because a long read on a
   black page is not everybody's idea of comfortable.

   The neon cannot come along. Measured against the light paper, every
   accent fails as text: lime 1.09:1, cyan 1.46:1, yellow 1.45:1, orange
   2.61:1, pink 2.93:1, purple 4.18:1, against a 4.5:1 floor. So light mode
   swaps in a darkened ink of the same hue for anything that is a letter,
   and keeps the raw neon only for fills and rules where contrast does not
   apply. Every ink below was measured: 5.2:1 to 7.2:1. */
.sx-toggle{
  display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);
  background:var(--panel);padding:2px;
}
.sx-toggle button{
  appearance:none;border:0;background:none;cursor:pointer;
  font-family:var(--lab);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);padding:6px 11px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.sx-toggle button[aria-pressed="true"]{background:var(--acc);color:var(--void)}
.sx-toggle button:hover{color:var(--bone)}

html.reading-light{
  --void:#F6F4EE; --panel:#EDEAE1; --panel2:#E4E0D5; --line:#D6D1C4;
  --bone:#1A1A1A; --mute:#5A5A55;
  --acc:var(--acc-ink,#546F00);
}
html.reading-light body{background:#F6F4EE;color:#1A1A1A}
html.reading-light .sx-article p,
html.reading-light .sx-article ul,
html.reading-light .sx-article ol{color:#26251F}
html.reading-light .sx-article strong,
html.reading-light .sx-article h2,
html.reading-light .sx-article h3{color:#111}
html.reading-light .sx-toggle button[aria-pressed="true"]{background:var(--acc);color:#F6F4EE}
html.reading-light .xhair i{background:var(--acc)}
html.reading-light .xring{border-color:var(--acc)}
/* the featured image is usually dark art, so give it an edge on light paper */
html.reading-light .wp-block-post-featured-image img{border-color:#CFC9BA}

/* GoHighLevel embeds on the contact page */
.sicc-embed{display:block;width:100%;border:0;background:var(--panel)}

/* == Anybody condensed width == */
/* Anybody carries its condensed look on a width axis rather than in a
   separate family name, so declaring the family is not enough: anything
   set in it also has to ask for the narrow width. */
.lab,.sx-kicker,.sx-strip-lab,.sx-chip,.sx-rt,.tl-when,.tl-tags span,.ct-row b,
.sp-work h4,.wp-body h4,.pp .tldr b,.audit-float,.menu-list a b,.btn,
.svc-n,.svc-go,.lcard-meta,.hero-eyebrow,.scrollcue,.ticker li,
.wp-block-post-date,.wp-block-post-terms,.sx-pillar-n,.sx-pillar-go,
.sx-bar .sx-nav a,.sx-foot,.wp-block-query-pagination{
  font-stretch:72%;
  font-variation-settings:"wdth" var(--lab-wdth,72);
}