/* Insights page (2026-10-02). The live sekhn.com blog listing in the V3 look: the homepage gradient and clouds behind
   the heading and the latest article, then a glass topic switch over a grid of the article covers. The covers are the
   live posts' own photos in their own colours (the per-topic tints were removed on 2026-10-03), with the site's film grain. Cards link to the articles on sekhn.com. Loaded after v3.css. */

/* film grain over a photo, the same monochrome noise as the homepage tiles */
.in-grain{position:relative;isolation:isolate;overflow:hidden;background:#173D29}
.in-grain::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;opacity:.5;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}
.in-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}

/* one colour per topic: the dot in the meta line and the tab */
.t-cannabis{--tc:#1F4A31}
.t-compliance{--tc:#1E7F99}
.t-peptides{--tc:#A9861A}
.t-marketing{--tc:#5E9A35}

/* ---- 1. hero: heading, then the latest article as a large glass card ---- */
.in-hero{min-height:0;padding-top:calc(64px + clamp(2.2rem,7vh,4.5rem));padding-bottom:clamp(2.5rem,6vh,4rem)}
.in-hero>.wrap{width:100%;display:grid;gap:clamp(1.8rem,4.5vh,2.8rem)}
.in-htext{display:grid;gap:1rem;justify-items:start}
.in-htext .crumb{margin:0;color:var(--ink2)}
.in-htext h1{font-size:clamp(2.7rem,5.6vw,4.8rem);line-height:1;letter-spacing:-.055em}
.in-htext .lede{color:var(--ink2);max-width:56ch}
.js .in-htext>*,.js .in-feature{animation:rise 1s var(--ease) both}
.js .in-htext>*:nth-child(2){animation-delay:.08s}.js .in-htext>*:nth-child(3){animation-delay:.16s}.js .in-feature{animation-delay:.26s}

.in-feature a{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);text-decoration:none;color:inherit;border-radius:28px;overflow:hidden;
  background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.94);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 24px 60px rgba(34,53,42,.12),inset 0 1px 0 #fff;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.in-feature a:hover{transform:translateY(-3px);box-shadow:0 32px 70px rgba(34,53,42,.17),inset 0 1px 0 #fff}
.in-feature .in-ph{min-height:clamp(300px,44vh,440px)}
.in-ftxt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.85rem;padding:clamp(1.6rem,3.2vw,2.9rem)}
.in-latest{font-size:.85rem;font-weight:600;color:#3F5C3B}
.in-ftxt h2{font-size:clamp(1.55rem,2.35vw,2.15rem);line-height:1.12;letter-spacing:-.04em}
.in-ftxt p{color:var(--muted);line-height:1.6;max-width:46ch}
a:hover .in-ph img{transform:scale(1.04)}

/* meta line and the read link, shared by the feature and the cards */
.in-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .9rem;font-size:.82rem;color:var(--muted);line-height:1.4}
.in-topic{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--tc)}
.in-topic::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tc);flex:none}
.in-more{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;color:#1F4A31}
.in-more .ic{width:17px;height:17px;transition:transform .35s var(--ease)}
a:hover .in-more .ic{transform:translateX(4px)}

/* ---- 2. all posts: heading and topic switch on one bar, then the grid ---- */
section.in-posts{padding-top:clamp(1.5rem,4vh,2.5rem)}
.in-bar{display:flex;align-items:center;justify-content:space-between;gap:1.1rem 2rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,4vh,2.3rem)}
.in-bar h2{font-size:clamp(1.9rem,3vw,2.6rem)}
.in-tabs{position:relative;display:flex;gap:4px;padding:5px;border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:rgba(34,53,42,.05);border:1px solid rgba(34,53,42,.07)}
.in-tabs::-webkit-scrollbar{display:none}
.in-tab{flex:none;display:inline-flex;align-items:center;gap:.45rem;border:0;border-radius:999px;padding:.62rem 1rem;background:transparent;cursor:pointer;white-space:nowrap;
  font:600 .88rem/1.1 var(--sans);color:var(--ink2);-webkit-tap-highlight-color:transparent;transition:background .25s,color .25s,box-shadow .25s}
.in-tab i{width:8px;height:8px;border-radius:50%;background:var(--tc);flex:none}
.in-tab span{font-weight:500;font-size:.8rem;color:#8A9185}
.in-tab:hover{background:rgba(255,255,255,.85);color:var(--ink)}
.in-tab[aria-pressed="true"]{background:#0E3A1F;color:#fff;box-shadow:0 8px 20px rgba(14,58,31,.22)}
.in-tab[aria-pressed="true"] span{color:rgba(255,255,255,.62)}
.in-tab[aria-pressed="true"] i{box-shadow:0 0 0 2px rgba(255,255,255,.55)}

.in-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.8rem,3.4vw,2.6rem) clamp(1rem,1.8vw,1.5rem)}
.in-card[hidden]{display:none}
.in-card a{display:flex;flex-direction:column;gap:1rem;height:100%;text-decoration:none;color:inherit;border-radius:20px}
.in-card .in-ph{aspect-ratio:3/2;border-radius:20px;box-shadow:0 14px 34px rgba(34,53,42,.1);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.in-card a:hover .in-ph{transform:translateY(-4px);box-shadow:0 24px 50px rgba(34,53,42,.17)}
.in-txt{display:flex;flex-direction:column;gap:.55rem;flex:1}
.in-card h3{font-size:clamp(1.1rem,1.35vw,1.26rem);line-height:1.26;letter-spacing:-.025em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.in-card .in-more{margin-top:auto;padding-top:.25rem}

/* scroll and filter motion: cards rise in one by one when the grid comes on screen; switching topic fades the set down,
   swaps it, and lets the new set rise in the same way */
.js .in-grid[data-reveal] .in-card{opacity:0;transform:translateY(18px)}
.js .in-grid.in .in-card{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.js .in-grid.in.swap .in-card{opacity:0;transform:translateY(10px);transition-duration:.2s;transition-delay:0s}

/* ---- phones: feature stacks; the grid becomes a compact list with small covers ---- */
@media (max-width:1080px){
  .in-feature a{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:860px){
  .in-feature a{grid-template-columns:1fr}
  .in-feature .in-ph{min-height:0;aspect-ratio:16/10}
  .in-ftxt{padding:1.4rem 1.3rem 1.6rem}
  .in-ftxt p{display:none}
  .in-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.9rem}
  .in-tabs{max-width:none;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);border-radius:0;background:none;border:0;padding-block:2px;gap:6px;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .in-tabs.end{-webkit-mask-image:none;mask-image:none}
  .in-tab{background:rgba(34,53,42,.05)}
  .in-grid{grid-template-columns:1fr;gap:0}
  .in-card a{flex-direction:row;align-items:center;gap:.95rem;padding:.95rem 0;border-radius:0;border-bottom:1px solid rgba(34,53,42,.09)}
  .in-card:first-child a{padding-top:.2rem}
  .in-card .in-ph{flex:0 0 96px;aspect-ratio:1;border-radius:14px;box-shadow:none}
  .in-card a:hover .in-ph{transform:none;box-shadow:none}
  .in-txt{gap:.35rem}
  .in-card h3{font-size:1rem;line-height:1.3}
  .in-meta{font-size:.76rem;gap:.1rem .7rem}
  .in-card .in-more{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .in-htext>*,.js .in-feature{animation:none}
  .in-ph img,.in-feature a,.in-card .in-ph{transition:none}
}