/* ==========================================================================
   wf-journal: the AI LAB journal index, a 1:1 port of webfluencer.nl/insights
   (Tailwind v4 utilities + inline styles + Framer Motion, read from the served page).
   Every size, easing and duration is the original value; the palette is the AI LAB's.
   Source of truth: products/_wf-nav/wf-journal.css (copied to noveq/css/ by inject-journal.py).
   ========================================================================== */


.wfj{--j-e:cubic-bezier(.16,1,.3,1);--j-k:cubic-bezier(.6,.01,.05,.95);
  --j-gutter:clamp(16px,2.5vw,20px);--j-section:clamp(48px,6vw,120px);
  --j-ink:#181818;--j-bg:var(--bg,#F0F0F0);--j-dark:#050B1C;--j-cream:#fbf8f1;
  --j-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --j-serif:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;   /* the site's own face, per the owner (no serif) */
  position:relative;background:var(--j-bg);color:var(--j-ink);font-family:var(--j-sans);padding-top:90px;min-height:100vh;
  -webkit-font-smoothing:antialiased}
.wfj *{box-sizing:border-box}
.wfj a{text-decoration:none;color:inherit}
.wfj button{font:inherit;border:0;margin:0;background:none;color:inherit;cursor:pointer}
.wfj h1,.wfj h2,.wfj h3,.wfj p{margin:0}

/* ---------- head ---------------------------------------------------------- */
.wfj-head{max-width:1900px;margin:0 auto;padding:80px var(--j-gutter) 32px}
@media (min-width:768px){.wfj-head{padding-top:120px;padding-bottom:40px}}
.wfj-h1{font-family:var(--j-serif);font-weight:600;line-height:1.06;letter-spacing:-.035em;max-width:1300px;font-size:clamp(34px,4vw,62px);color:var(--j-ink)}
.wfj-h1 .dim{color:rgba(24,24,24,.6)}
.wfj-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.18em;margin-bottom:-.18em}
.wfj-w>span{display:inline-block;transform:translateY(100%);transition:transform 1.1s var(--j-e);transition-delay:var(--d,0s)}
.is-ready .wfj-w>span{transform:translateY(0)}

/* ---------- filters ------------------------------------------------------- */
.wfj-body{padding-bottom:var(--j-section)}
.wfj-in{max-width:1900px;margin:0 auto;padding:0 var(--j-gutter)}
.wfj-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.wfj .wfj-pill{font-weight:500;letter-spacing:-.42px;line-height:14px;padding:10px 16px;border-radius:999px;font-size:clamp(12px,1vw,16px);
  background:rgba(0,0,0,.05);color:rgba(0,0,0,.6);transition:background-color .15s,color .15s}
.wfj .wfj-pill:hover{background:rgba(0,0,0,.1);color:#000}
.wfj .wfj-pill.on{background:var(--j-ink);color:var(--j-cream)}
.wfj .wfj-pill[hidden]{display:none}

/* ---------- grid ---------------------------------------------------------- */
.wfj-gridwrap{transition:opacity .5s var(--j-e),transform .5s var(--j-e)}
.wfj-gridwrap.is-swap{opacity:0;transform:translateY(12px);transition:none}
.wfj-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:768px){
  .wfj-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(230px,21vw,400px);gap:20px}
  .wfj-cell{grid-column:span 2}
  .wfj-cell.is-big{grid-column:span 4;grid-row:span 2}
}
.wfj-cell{min-width:0}
.wfj-cell[hidden]{display:none}
.wfj-card{display:block;height:100%}
.wfj-frame{position:relative;width:100%;overflow:hidden;border-radius:20px;aspect-ratio:4/3;
  clip-path:inset(0 0 100% 0 round 24px);transition:clip-path 1.15s var(--j-e);transition-delay:var(--d,0s)}
@media (min-width:768px){.wfj-frame{border-radius:24px;aspect-ratio:auto;height:100%}}
.wfj-cell.in .wfj-frame{clip-path:inset(0 0 0 0 round 24px)}
.wfj-zoom{position:absolute;inset:0;transform:scale(1.09);transition:transform 1.5s var(--j-e);transition-delay:var(--d,0s)}
.wfj-cell.in .wfj-zoom{transform:scale(1)}
.wfj-zoom img,.wfj-zoom video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--j-e)}
.wfj-card:hover .wfj-zoom img,.wfj-card:hover .wfj-zoom video{transform:scale(1.045)}
/* the living still layers over the poster once main.js has attached its sources */
.wfj-zoom video.jl{opacity:0;transition:opacity .7s ease,transform 1.2s var(--j-e)}
.wfj-zoom video.jl.is-live{opacity:1}
@media (prefers-reduced-motion:reduce){.wfj-zoom video.jl{display:none}}
.wfj-shade{position:absolute;inset:0;background:rgba(0,0,0,.12);transition:background-color .9s var(--j-e)}
.wfj-card:hover .wfj-shade{background:rgba(0,0,0,.04)}
.wfj-gtop{position:absolute;left:0;right:0;top:0;height:25%;background:linear-gradient(to bottom,rgba(0,0,0,.38),transparent);pointer-events:none}
.wfj-gbot{position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.45),transparent);pointer-events:none}
.wfj-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(12px,1.1vw,20px) clamp(14px,1.3vw,24px) 0;pointer-events:none}
.wfj-top span{font-weight:600;font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(10px,.72vw,12px);color:rgba(251,248,241,.7)}
.wfj-bot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:0 clamp(14px,1.3vw,24px) clamp(14px,1.3vw,24px)}
.wfj-txt{opacity:0;transform:translateY(14px);transition:opacity 1s var(--j-e),transform 1s var(--j-e);transition-delay:calc(var(--d,0s) + .14s);min-width:0}
.wfj-cell.in .wfj-txt{opacity:1;transform:none}
.wfj-txt h3{font-weight:600;line-height:1.12;letter-spacing:-.03em;color:var(--j-cream);font-size:clamp(20px,1.5vw,27px);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wfj-cell.is-big .wfj-txt h3{font-size:clamp(20px,2.1vw,38px)}
.wfj-tagw{margin-top:clamp(10px,.9vw,16px)}
.wfj-tag{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:#fff;font-weight:500;letter-spacing:-.02em;line-height:1;font-size:clamp(9px,.68vw,12px);transition:border-color .5s}
@media (min-width:768px){.wfj-tag{padding-top:10px;padding-bottom:10px}}
.wfj-card:hover .wfj-tag{border-color:rgba(255,255,255,.35)}
.wfj-arr{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#fff;
  transition:background-color .5s,border-color .5s,color .5s}
@media (min-width:768px){.wfj-arr{display:flex}}
.wfj-arr svg{width:16px;height:16px;display:block}
.wfj-card:hover .wfj-arr{background:#fff;border-color:#fff;color:#000}
.wfj-empty{margin-top:24px;font-size:15px;color:rgba(24,24,24,.6)}

/* ---------- a11y + motion ------------------------------------------------- */
.wfj a:focus-visible,.wfj button:focus-visible{outline:2px solid var(--j-ink);outline-offset:3px;border-radius:999px}
.wfj-card:focus-visible{outline-offset:-3px;border-radius:24px;outline-color:#fff}
@media (prefers-reduced-motion:reduce){
  .wfj-w>span,.wfj-frame,.wfj-zoom,.wfj-txt,.wfj-cta h2 .w>span,.wfj-cta p,.wfj-btn,.wfj-hint,.wfj-gridwrap{transition:none}
  .wfj-w>span{transform:none}
  .wfj-frame{clip-path:none}.wfj-zoom{transform:none}.wfj-txt{opacity:1;transform:none}
  .wfj-cta h2 .w>span{transform:none}.wfj-cta p,.wfj-btn,.wfj-hint{opacity:1;transform:none}
  .wfj-hint i::before{animation:none}
}

/* No scripting: the reveals are driven by classes only JavaScript adds. Show the settled state
   for the title words, the cards and the CTA; the animated path is untouched. Kept at the END of
   the file so it wins over the equal-specificity rules above. */
@media (scripting: none){.wfj-w>span{transform:none}.wfj-frame{clip-path:none}.wfj-zoom{transform:none}.wfj-txt{opacity:1;transform:none}
  .wfj-cta h2 .w>span{transform:none}.wfj-cta p,.wfj-btn,.wfj-hint{opacity:1;transform:none}}