/* ═══════════════════════════════════════════════════════════════════════
   TCERC · Website blog — shared stylesheet
   Two publications, one company. The flip is carried by a body class:
     .journal  → The Journal  · dark editorial (black/yellow)
     .instinct → Instinct     · newsletter  (cream/black/yellow)
   Same fonts, same yellow. You always know which room you're in.
   Design tokens (fonts, --esc-*) come from ../_ds/colors_and_type.css
   (linked first on every page).
   ═══════════════════════════════════════════════════════════════════════ */

.journal *, .journal *::before, .journal *::after,
.instinct *, .instinct *::before, .instinct *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.journal, .instinct {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.journal img, .instinct img { display: block; max-width: 100%; }
.journal a, .instinct a { color: inherit; }

/* ── per-publication palettes ─────────────────────────────────────────── */
.journal {
  --paper:    #0a0a0a;
  --paper-2:  #131313;      /* raised card */
  --paper-3:  #1c1c1c;      /* hover / inset */
  --ink:      #fcfcfc;
  --ink-soft: #a6a29b;      /* secondary text */
  --ink-mute: #6b6460;      /* captions */
  --line:     #262626;
  --y:        var(--esc-y);
}
.instinct {
  --paper:    #faf8f3;      /* lightened — warm off-white, not heavy cream */
  --paper-2:  #f2efe7;      /* raised / inset */
  --paper-3:  #eae4d8;
  --ink:      #0a0a0a;
  --ink-soft: #5a554d;
  --ink-mute: #837c70;
  --line:     #e6dfd2;
  --y:        var(--esc-y);
  /* Instinct wordmark = Nexa Black, all caps (uploaded font in WP).
     'Montserrat' is a preview-only stand-in; Nexa resolves in production. */
  --font-wordmark: 'Nexa', 'Nexa Black', 'Montserrat', 'Arial Black', sans-serif;
}

/* ── editorial category accents ────────────────────────────────────────────
   One place to change the category system. The four WordPress categories each
   borrow a hue from the product palette (defined in _ds/colors_and_type.css)
   so the blog carries the same colour family as the product grid — but these
   are CATEGORY tokens, not product badges, so they can diverge later without
   touching markup. FEATURED posts wear yellow (the parent accent) to flag the
   flagship, whatever category they belong to.                              */
:root {
  --pillar-human:    var(--shift-accent);   /* Human Systems   · hot magenta   */
  --pillar-tech:     var(--ctrl-accent);    /* Tech & Threats  · cold teal     */
  --pillar-analysis: var(--cmd-accent);     /* Analysis        · midnight blue */
  --pillar-lab:      var(--space-accent);   /* Inside the Lab  · deep violet   */
}
.p-human    { --acc: var(--pillar-human); }
.p-tech     { --acc: var(--pillar-tech); }
.p-analysis { --acc: var(--pillar-analysis); }
.p-lab      { --acc: var(--pillar-lab); }
.p-featured { --acc: var(--y); }            /* flagship / highlighted — parent yellow */

/* ── category label + dot (shared across every page) ──────────────────────
   The dot reads --acc set by the .p-* class on the item (or an ancestor).
   Journal world defaults to yellow; Instinct (cream) defaults to black.   */
.cat { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; }
.cat__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc, var(--y)); flex: none; }
.instinct .cat__dot { background: var(--acc, #0a0a0a); }

/* ── entrance reveal (transform-only — never hides content) ───────────────
   Page-level stagger (e.g. grid nth-child delays) stays in the page.        */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .6s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }

/* ── shared type primitives ───────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--y);
  margin: 0;
}
.eyebrow--mute { color: var(--ink-mute); }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.9;
  margin: 0;
}

.serif-it {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
}

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap   { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.measure{ width: 100%; max-width: 680px;  margin: 0 auto; padding: 0 24px; }

/* ── top nav ──────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: 1200px; margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  font-size: 26px; letter-spacing: 0.02em; line-height: 1; text-decoration: none;
  color: var(--ink); display: inline-flex; align-items: baseline; gap: 2px;
}
.nav__brand .dot { color: var(--y); }
/* Instinct lives in the cream world — its wordmark dot is black, never yellow.
   (Dark-background sections inside Instinct re-assert the yellow dot locally.) */
.instinct .nav__brand .dot,
.instinct .foot__brand .dot { color: #0a0a0a; }
.nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft); transition: color .15s ease;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--y); }
.nav__cta {
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.12em;
  color: var(--ink) !important; padding: 9px 16px; border: 1px solid var(--line);
  border-radius: 999px; transition: border-color .15s ease, color .15s ease;
}
.nav__cta:hover { border-color: var(--y); color: var(--y) !important; }
@media (max-width: 760px){ .nav__links li.hide-sm{ display:none; } }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--y { background: var(--y); color: #0a0a0a; }
.btn--y:hover { background: #ffd91f; transform: translateY(-2px); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--y); color: var(--y); transform: translateY(-2px); }
.btn--sq { border-radius: 2px; }            /* editorial, flat-world corners */
.btn .arr { font-size: 16px; line-height: 1; }

/* ── ruler / tick divider (barcode rule) ──────────────────────────────── */
.ruler {
  height: 40px;
  background-image: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 30%, transparent) 0 1px, transparent 1px 8px);
}

/* ── category eyebrow + read-time inline meta ─────────────────────────── */
.meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-mute); display: inline-block; }
.readtime { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }

/* ── atmospheric placeholder panel (Mode-3 swap target) ───────────────── */
.atmos {
  position: relative; overflow: hidden; background: #060606;
  background-image:
    radial-gradient(120% 90% at 78% 18%, rgba(242,199,20,0.10) 0%, transparent 55%),
    radial-gradient(90% 80% at 12% 92%, rgba(242,199,20,0.05) 0%, transparent 60%);
}
.atmos::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06; mix-blend-mode: screen;
}
.atmos__tag {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.34);
}

/* photo wrapper that darkens an image so headlines sit on it */
.photo { position: relative; overflow: hidden; background: #0a0a0a; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--sink img { opacity: 0.86; }
.photo__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.30) 45%, rgba(10,10,10,0.86) 100%);
}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); margin-top: 96px; }
.foot__inner {
  max-width: 1200px; margin: 0 auto; padding: 56px 32px 64px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap;
}
.foot__brand { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 30px; letter-spacing: 0.02em; }
.foot__brand .dot { color: var(--y); }
.foot small { display: block; color: var(--ink-mute); font-size: 13px; margin-top: 10px; letter-spacing: 0.02em; }
.foot__links { display: flex; gap: 28px; flex-wrap: wrap; }
.foot__links a { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.foot__links a:hover { color: var(--y); }

/* ── reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ── Font name overrides ──────────────────────────────────────────────────
   TCERC's Dharma/Nexa are loaded via Adobe Fonts, whose family names are
   lowercase-hyphenated. Lead the stacks with those so they actually resolve,
   then fall back to the spaced names + web fallbacks.                        */
:root { --font-display: 'dharma-gothic-e', 'Dharma Gothic E', 'Bebas Neue', Impact, sans-serif; }
.instinct { --font-wordmark: 'nexa', 'Nexa', 'Nexa Black', 'Montserrat', 'Arial Black', sans-serif; }

/* ── WordPress bridge: post/body classes → the accent variable ────────────
   WordPress adds category-<slug> and tag-<slug> automatically (body + each
   post in a grid). These map them onto --acc so the design colours itself.  */
.category-human-systems  { --acc: var(--pillar-human); }
.category-tech-threats   { --acc: var(--pillar-tech); }
.category-analysis       { --acc: var(--pillar-analysis); }
.category-inside-the-lab { --acc: var(--pillar-lab); }
/* Merging categories — aliased to their merge target so they look right during
   the transition, and harmless once you've reassigned posts + deleted them.    */
.category-world-work     { --acc: var(--pillar-human); }  /* → Human Systems */
.category-design-thinking{ --acc: var(--pillar-lab); }   /* → Inside the Lab */
/* Featured wins over category — keep last. Sticky posts or a 'featured' tag.  */
.tag-featured, .sticky   { --acc: var(--y); }

/* ── Theme-override guards ────────────────────────────────────────────────
   Many themes force their own colour onto headings + links/buttons, beating
   inherited colour. Re-assert ours inside the publication skins.            */
.journal h1, .journal h2, .journal h3, .journal h4, .journal h5, .journal h6,
.instinct h1, .instinct h2, .instinct h3, .instinct h4, .instinct h5, .instinct h6 { color: var(--ink) !important; }
.journal .btn--y, .instinct .btn--y { color: #0a0a0a !important; }
/* Headings WITHIN the post body (subheadings the author writes) — force the
   display font + colour over the theme's own heading styling.               */
.abody h1, .abody h2, .abody h3, .abody h4, .abody h5, .abody h6,
.ibody h1, .ibody h2, .ibody h3, .ibody h4, .ibody h5, .ibody h6 {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.004em;
  line-height: 1.02;
  color: var(--ink) !important;
}
.abody h2, .ibody h2 { font-size: clamp(26px, 3.2vw, 38px) !important; margin: 44px 0 16px !important; }
.abody h3, .ibody h3 { font-size: clamp(22px, 2.6vw, 30px) !important; margin: 36px 0 14px !important; }

/* ── One centred reading column ───────────────────────────────────────────
   Each piece is its own Beaver Builder module (full row width), so pin them
   all to the same max-width + auto margins → their left edges line up.       */
.journal .cat, .journal .ahead__title, .journal .ahead__sf, .journal .ahead__by,
.journal .abody, .journal .acta__inner,
.instinct .cat, .instinct .ihead__inner, .instinct .ibody, .instinct .signoff__inner {
  max-width: 760px !important; margin-left: auto !important; margin-right: auto !important;
}
.journal .ahero__media, .instinct .ihero__media { max-width: 940px !important; margin-left: auto !important; margin-right: auto !important; }

/* category eyebrow text/link colour (theme forces black on the link) */
.journal .cat, .journal .cat a, .instinct .cat, .instinct .cat a { color: var(--ink-soft) !important; text-decoration: none !important; }
/* category as a left-aligned block label */
.journal .cat, .instinct .cat { display: block !important; }
/* Force LEFT alignment on the module AND every inner element Beaver Builder
   wraps the content in (.fl-module-content, .fl-heading, .fl-rich-text…) —
   this is what actually beats BB's own centring.                            */
.journal .cat, .journal .cat *, .journal .ahead__title, .journal .ahead__title *,
.journal .ahead__sf, .journal .ahead__sf *, .journal .ahead__by, .journal .ahead__by *,
.journal .abody, .journal .abody *, .journal .acta__inner, .journal .acta__inner *,
.instinct .cat, .instinct .cat *, .instinct .ihead__inner, .instinct .ihead__inner *,
.instinct .ibody, .instinct .ibody *, .instinct .signoff__inner, .instinct .signoff__inner * {
  text-align: left !important;
}
/* Sign-off: match the body column width exactly, and swing the signature right */
.instinct .signoff { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 32px !important; padding-right: 32px !important; }
.instinct .signoff__inner { max-width: none !important; margin: 0 !important; }
.instinct .signoff .sig, .instinct .signoff .role { text-align: right !important; }
/* category eyebrow dot, for connected modules that have no inner dot span */
.journal .cat::before, .instinct .cat::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--acc, var(--y)); margin-right: 9px; vertical-align: middle;
}
.instinct .cat::before { background: var(--acc, #0a0a0a); }

/* ── Posts-module grid cards (Journal index) ──────────────────────────────
   Beaver Builder / the theme give each grid post a white background + frame.
   Strip that and force our dark card so the cards match the design.          */
.journal .fl-post-grid-post, .journal .fl-post-grid-post-content,
.journal .fl-post-feed-post, .journal article.fl-post-grid-post,
.journal .fl-post-column {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
.journal .card { background: var(--paper-2) !important; }
/* card shape + hover (theme strips the signature corner + hover) */
.journal .card {
  border-radius: 0 0 0 48px !important; border: 1px solid var(--line) !important; overflow: hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .4s cubic-bezier(.16,1,.3,1) !important;
}
.journal .card:hover {
  transform: translateY(-5px) !important;
  border-color: color-mix(in srgb, var(--acc) 55%, transparent) !important;
  box-shadow: 0 28px 60px -30px color-mix(in srgb, var(--acc) 80%, transparent) !important;
}
/* masthead dot: yellow in the Journal, black in Instinct */
.journal .masthead__word .dot { color: var(--y) !important; }
.instinct .masthead__word .dot { color: #0a0a0a !important; }
/* "View all" + read-more links are yellow (theme forces them white) */
.journal .masthead__all, .journal .masthead__all:hover,
.journal .readmore, .journal .readmore:hover { color: var(--y) !important; text-decoration: none !important; }

/* filter bar as links (category-archive pills) */
.journal .filter a {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft) !important; background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 16px; text-decoration: none !important; transition: all .14s ease;
}
.journal .filter a:hover { color: var(--ink) !important; border-color: #3a3a3a; }
.journal .filter a .cat__dot { width: 7px; height: 7px; }

/* The split's dotted dividers: vertical line between feature + list, and a
   line between each list item (BB wraps each post, so target those wrappers). */
.journal .split__list { border-left: 1px dotted color-mix(in srgb, var(--ink) 30%, transparent) !important; }
.journal .split__list [class*="fl-post"] + [class*="fl-post"] { border-top: 1px dotted color-mix(in srgb, var(--ink) 26%, transparent); }
@media (max-width: 900px) { .journal .split__list { border-left: 0 !important; } }
/* kill Beaver Builder's big default gap between list posts */
.journal .split__list [class*="fl-post"] { margin: 0 !important; padding: 0 !important; }
/* excerpts always muted grey (stops a stray link/colour turning text yellow) */
.journal .litem__sf, .journal .litem__sf *, .journal .feature__sf, .journal .feature__sf *,
.journal .card__sf, .journal .card__sf * { color: var(--ink-soft) !important; }

/* filter pills: hover stays subtle (no theme yellow fill), active pill solid yellow */
.journal .filter button:hover { background: transparent !important; color: var(--ink) !important; border-color: #3a3a3a !important; }
.journal .filter button[aria-pressed="true"] { background: var(--y) !important; color: #0a0a0a !important; border-color: var(--y) !important; }
.journal .filter button[aria-pressed="true"] .cat__dot { display: none; }
/* hover rule everywhere: TITLE takes the accent; body text stays muted.
   (The theme link-hover colour leaks yellow onto excerpts — kill it.)        */
/* base + hover, INCLUDING descendants — the excerpt shortcode nests its own
   <p>, which the browser splits out of our wrapper; catch every child too.   */
.journal .card__sf, .journal .card__sf *, .journal .card .card__body p { color: var(--ink-soft) !important; }
.journal .card:hover .card__sf, .journal .card:hover .card__sf *, .journal .card:hover .card__body p,
.journal .card:hover .card__rt, .journal .card:hover .cat { color: var(--ink-soft) !important; }
.journal .card:hover .card__title { color: var(--acc) !important; }
.journal .litem__sf, .journal .litem__sf *, .journal .litem p { color: var(--ink-soft) !important; }
.journal .litem:hover .litem__sf, .journal .litem:hover .litem__sf *, .journal .litem:hover p,
.journal .litem:hover .litem__rt, .journal .litem:hover .cat { color: var(--ink-soft) !important; }
.journal .litem:hover .litem__title { color: var(--acc) !important; }
.journal .feature__title a:hover { color: var(--acc) !important; }
.journal .feature:hover .feature__sf, .journal .feature:hover .feature__sf *,
.journal .feature:hover .feature__by { color: var(--ink-soft) !important; }

/* ── Take the grid layout off BB's masonry JS ─────────────────────────────
   Masonry absolutely-positions each card (inline styles), so cards can't
   reflow when filtered and heights go ragged. A real CSS grid: equal heights,
   automatic reflow on filter, no stray gaps. !important beats inline styles. */
.journal .grid-area .fl-post-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 24px; height: auto !important; }
/* neutralise BOTH wrappers masonry positions (.fl-post-column wraps the post) */
.journal .grid-area .fl-post-column, .journal .grid-area .fl-post-grid-post {
  position: static !important; left: auto !important; top: auto !important;
  width: auto !important; margin: 0 !important; visibility: visible !important; height: 100%;
}
.journal .grid-area .fl-post-grid-sizer { display: none !important; }
.journal .grid-area .card { height: 100% !important; display: flex !important; flex-direction: column; }
@media (max-width: 992px) { .journal .grid-area .fl-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .journal .grid-area .fl-post-grid { grid-template-columns: 1fr; } }

/* ── Page background behind the rows ──────────────────────────────────────
   The theme paints its content wrapper white over our dark body. On journal /
   instinct pages, hand the page canvas to the publication palette.           */
body.journal .fl-page, body.journal .fl-page-content, body.journal .fl-content,
body.journal .fl-content-full { background: var(--paper) !important; }
body.instinct .fl-page, body.instinct .fl-page-content, body.instinct .fl-content,
body.instinct .fl-content-full { background: var(--paper) !important; }