/* =====================================================================
   CEEK — journal: the list of articles and the article page
   ===================================================================== */

/* the list */
.jl{padding-top:calc(var(--nav-pad) * 2 + clamp(70px,8vw,150px));padding-bottom:clamp(80px,9vw,170px)}
.jl-h1{max-width:12em;margin-top:.35em}
.jl-lead{max-width:30em;margin-top:.7em;color:var(--text-2);text-wrap:pretty}
.jl-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,28px);margin:clamp(48px,5vw,96px) 0 0;padding:0;list-style:none}
.jl-card{position:relative;display:flex;flex-direction:column;gap:clamp(12px,1.1vw,20px);height:100%;padding:clamp(22px,2.2vw,40px) clamp(22px,2.2vw,40px) clamp(64px,5.4vw,96px);border-radius:var(--r-lg);background:var(--white);box-shadow:0 1px 0 rgba(18,20,23,.04),0 18px 50px -30px rgba(18,20,23,.35);transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.jl-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4em 1em;color:var(--text-3)}
.jl-title{text-wrap:balance;hyphens:auto}
.jl-text{color:var(--text-2);text-wrap:pretty}
.jl-arrow{position:absolute;left:clamp(22px,2.2vw,40px);bottom:clamp(22px,2.2vw,36px);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mist);color:var(--white);transition:transform .5s var(--e-out)}
.jl-arrow svg{width:18px;height:18px}
@media (hover:hover){
  .jl-card:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(18,20,23,.04),0 28px 60px -30px rgba(18,20,23,.45)}
  .jl-card:hover .jl-arrow{transform:translateX(6px)}
}
.jl-card:focus-visible{outline:2px solid var(--mist);outline-offset:4px}
@media (max-width:1024px){.jl-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.jl-list{grid-template-columns:1fr}}

/* the article */
.ja{padding-top:calc(var(--nav-pad) * 2 + clamp(70px,8vw,150px));padding-bottom:clamp(80px,9vw,170px)}
.ja-head,.ja-body,.ja-cta{max-width:46rem;margin-inline:auto}
.ja-meta{color:var(--text-3)}
.ja-title{margin-top:.45em;font-size:clamp(36px,4.4vw,84px);text-wrap:balance;hyphens:auto}
.ja-lead{margin-top:.7em;color:var(--text-2);text-wrap:pretty}
.ja-date{margin-top:1.4em}
.ja-body{margin-top:clamp(40px,4vw,72px)}
.ja-body p{margin-top:1em;text-wrap:pretty}
.ja-h2{margin-top:2em;font-size:clamp(22px,1.9vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:500;text-wrap:balance}
.ja-list{margin:1em 0 0;padding:0;list-style:none}
.ja-list li{position:relative;margin-top:.7em;padding-left:1.4em;text-wrap:pretty}
.ja-list li::before{content:"";position:absolute;left:0;top:.62em;width:.5em;height:.5em;border-radius:50%;background:var(--mist)}
.ja-cta{margin-top:clamp(56px,6vw,110px);padding:clamp(26px,3vw,56px);border-radius:var(--r-lg);background:var(--sand)}
.ja-cta-text{margin-top:.6em;max-width:30em;color:var(--text-2)}
.ja-cta-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2vw,32px)}