/* ═══════════════════════════════════════════════════════════════════
   ROOH MIND CARE — BLOG INDEX ("the Journal")
   Loaded only by blog.html, after pages.css, whose tokens (--sage,
   --gold, --forest, …), header, footer and .band it reuses. Every
   selector is namespaced .jr-* so nothing here can reach another page.

   Topic colours: each [data-cat] element carries four tokens, so a
   tile, a rail chip, a shelf and every card inside it pick up the
   same accent by inheritance.
     --c  accent (icons, hairlines)   --t  soft tint (pill backgrounds)
     --g  deeper tint (gradients)     --ct accent text, AA on --t and white
   ═══════════════════════════════════════════════════════════════════ */

.jr,[data-cat]{--c:#4A7C59;--t:#E6F0E8;--g:#BFD8C6;--ct:#35603F}
[data-cat="new-to-therapy"]{--c:#4A7C59;--t:#E6F0E8;--g:#BFD8C6;--ct:#35603F}
[data-cat="therapy-approaches"]{--c:#2F8279;--t:#E1F1EE;--g:#B3DBD3;--ct:#1F5F58}
[data-cat="anxiety-stress"]{--c:#7560A8;--t:#EDE8F6;--g:#CFC3E6;--ct:#56448A}
[data-cat="students-young-people"]{--c:#B88A3A;--t:#F6EDDB;--g:#E9CF9C;--ct:#7A571B}
[data-cat="modern-life"]{--c:#3F6DB0;--t:#E5EDF8;--g:#BCD0EE;--ct:#2D5189}
[data-cat="depression-loneliness"]{--c:#52648F;--t:#E6EAF3;--g:#BCC6DD;--ct:#3C4C73}
[data-cat="relationships"]{--c:#BC5E55;--t:#F7E6E3;--g:#E9BDB6;--ct:#8E3F38}
[data-cat="films-meaning"]{--c:#8B5585;--t:#F3E5F1;--g:#D9B8D4;--ct:#6A3D66}

.blog-index,.jr{
  --jr-maxw:1100px;
  --jr-gut:clamp(1rem,4vw,2rem);
  --jr-hdr:66px;
  --jr-ease:cubic-bezier(.2,.8,.2,1);
  --jr-shadow:0 1px 2px rgba(26,46,32,.05),0 12px 30px -14px rgba(26,46,32,.22);
  --jr-shadow-hi:0 2px 6px rgba(26,46,32,.06),0 28px 50px -18px rgba(26,46,32,.34);
}
.jr [hidden]{display:none!important}
.jr-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Wider than the 820px reading column the other pages use */
.blog-index .crumb{max-width:var(--jr-maxw)}
/* clip, not hidden: hidden would make main a scroll container and break the sticky rail */
main.jr{max-width:none;padding:0 0 1rem;overflow-x:clip}
.jr-hero,.jr-topics,.jr-featured,.jr-library,.jr-trust{
  max-width:var(--jr-maxw);margin-left:auto;margin-right:auto;
  padding-left:var(--jr-gut);padding-right:var(--jr-gut);
}
.jr .band{width:calc(100% - 2 * var(--jr-gut));max-width:calc(var(--jr-maxw) - 4rem);margin:3.4rem auto 0}

/* ── Section heads ── */
.jr-head{margin:0 0 1.5rem}
.jr .jr-kicker{margin:0 0 .4rem;font-size:1rem;font-weight:600;letter-spacing:normal;text-transform:none;color:#8A6A33}
.jr-head h2{margin:0;font-size:clamp(1.75rem,4vw,2.5rem);letter-spacing:normal}
.jr .jr-head__sub{margin:.45rem 0 0;font-size:1rem;color:var(--text-light)}

/* ═════ HERO ═════ */
.jr-hero{position:relative;isolation:isolate;display:grid;gap:2rem;padding-top:1.4rem;padding-bottom:.5rem}
@media(min-width:1000px){
  .jr-hero{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:3.5rem;padding-top:2.2rem}
}
.jr .jr-eyebrow{margin:0;font-size:1rem;font-weight:600;color:#8A6A33}
.jr-hero h1{margin:1.1rem 0 1rem;font-size:clamp(2.4rem,6.6vw,4.2rem);line-height:1.02;letter-spacing:normal}
.jr-hero h1 em{font-style:normal}
.jr .jr-hero__sub{margin:0;font-size:1.08rem;line-height:1.7;color:var(--text-light);max-width:52ch}

/* Search */
.jr-search{
  position:relative;display:flex;align-items:center;max-width:600px;height:64px;margin:1.7rem 0 0;
  background:#fff;border:1px solid rgba(44,74,53,.12);border-radius:8px;
  box-shadow:0 1px 2px rgba(26,46,32,.04),0 16px 36px -14px rgba(44,74,53,.30);
  transition:box-shadow .3s var(--jr-ease),border-color .3s;
}
.jr-search:focus-within{border-color:var(--sage);box-shadow:0 0 0 5px rgba(107,158,122,.18),0 20px 44px -14px rgba(44,74,53,.36)}
.jr-search__icon{position:absolute;left:22px;font-size:22px;color:var(--sage-dark);pointer-events:none}
.jr-search input{
  flex:1;min-width:0;height:100%;margin:0;border:0;border-radius:8px;background:transparent;outline:none;
  padding:0 3.6rem 0 3.6rem;font:500 1.03rem/1 'Mukta',system-ui,sans-serif;color:var(--forest);
  -webkit-appearance:none;appearance:none;
}
.jr-search input::placeholder{color:#66786C;opacity:1}
.jr-search input::-webkit-search-cancel-button,.jr-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.jr-search__clear{
  position:absolute;right:12px;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(44,74,53,.07);color:var(--forest);font-size:18px;transition:background .2s;
}
.jr-search__clear:hover{background:rgba(44,74,53,.14)}
.jr-search__kbd{
  position:absolute;right:22px;padding:4px 8px;border-radius:7px;background:#FBF9F3;
  border:1px solid rgba(44,74,53,.16);border-bottom-width:2px;
  font:700 .74rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-light);
}
.jr-search:focus-within .jr-search__kbd,.jr-search.has-value .jr-search__kbd{display:none}
@media(hover:none){.jr-search__kbd{display:none}}

/* Popular searches + Surprise me */
.jr-try{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:1rem;max-width:600px}
.jr-try__label{margin-right:.25rem;font-size:.9rem;font-weight:600;letter-spacing:normal;text-transform:none;color:var(--text-light)}
.jr-try__chip{
  display:inline-flex;align-items:center;gap:.38rem;padding:.45rem .9rem;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.7);border:1px solid rgba(44,74,53,.12);
  font:600 .82rem/1.2 'Mukta',system-ui,sans-serif;color:var(--forest);text-decoration:none;
  transition:transform .25s var(--jr-ease),background .2s,border-color .2s,box-shadow .25s;
}
.jr-try__chip:hover{background:#fff;border-color:var(--sage);transform:translateY(-2px);box-shadow:0 8px 16px -10px rgba(44,74,53,.45)}
.jr-surprise{border-color:rgba(201,166,107,.6);color:#6E4F16}
.jr-surprise:hover{border-color:#C9A66B}

/* Your reading (returning readers only) */
.jr-journey{
  display:flex;align-items:center;gap:.95rem;max-width:600px;margin-top:1.3rem;padding:.8rem 1.1rem .8rem .8rem;
  border-radius:8px;background:#fff;
  border:1px solid rgba(201,166,107,.45);box-shadow:0 14px 30px -18px rgba(138,106,51,.55);
  animation:jr-rise .7s var(--jr-ease) both;
}
.jr-journey__ring{position:relative;flex:none;width:54px;height:54px}
.jr-journey__ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.jr-journey__ring circle{fill:none;stroke:rgba(107,158,122,.18);stroke-width:3.6}
.jr-journey__ring .jr-journey__arc{stroke:#B8862F;stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:97.4;transition:stroke-dashoffset 1.4s var(--jr-ease) .2s}
.jr-journey__n{position:absolute;inset:0;display:grid;place-items:center;font:600 1rem/1 'Literata',Georgia,serif;color:var(--forest)}
.jr .jr-journey__line{margin:0;font-size:.9rem;line-height:1.45;color:var(--text)}
.jr-journey__line b{color:var(--forest)}
.jr .jr-journey__next{margin:.2rem 0 0;font-size:.84rem;line-height:1.45;color:var(--text-light)}
.jr-journey__next a{font-weight:700;color:var(--forest);text-decoration:none;border-bottom:1.5px solid rgba(201,166,107,.7)}
.jr-journey__next a:hover{border-bottom-color:var(--forest)}
@keyframes jr-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Trust stats */
.jr-stats{list-style:none;display:flex;flex-wrap:wrap;gap:0 .5em;margin:1.4rem 0 0;padding:0;font-size:.95rem;color:var(--text-light)}
.jr .jr-stats li{margin:0}
.jr .jr-stats li:not(:last-child)::after{content:"\00B7";margin-left:.5em}
.jr-stats strong{font-weight:inherit}

/* Collage (wide screens) */
.jr-collage{display:none}
@media(min-width:1000px){
  .jr-collage{display:block;position:relative;height:470px}
  .jr-collage__card{
    position:absolute;display:block;overflow:hidden;border-radius:8px;background:#ECE7DC;border:6px solid #fff;
    box-shadow:0 34px 60px -24px rgba(26,46,32,.45),0 10px 20px -10px rgba(26,46,32,.25);
    transition:rotate .6s var(--jr-ease),scale .6s var(--jr-ease),box-shadow .6s;
    animation:jr-float 7s ease-in-out infinite;
  }
  .jr-collage__card img{width:100%;aspect-ratio:4/5;object-fit:cover}
  .jr-collage__card--1{top:4%;left:0;width:47%;rotate:-7deg;z-index:1;animation-delay:-1s}
  .jr-collage__card--2{top:14%;left:28%;width:47%;rotate:3deg;z-index:2;animation-delay:-3.5s}
  .jr-collage__card--3{top:30%;right:0;width:40%;rotate:9deg;z-index:3;animation-delay:-5s}
  .jr-collage__card:hover{rotate:0deg;scale:1.05;z-index:4;box-shadow:0 40px 70px -24px rgba(26,46,32,.55)}
  .jr-collage__chip{
    position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-direction:column;gap:1px;
    padding:.5rem .75rem;border-radius:8px;background:#fff;
    font-size:.7rem;font-weight:600;color:var(--text-light);
  }
  .jr-collage__chip b{font:600 .92rem/1.2 'Literata',Georgia,serif;color:var(--forest)}
  .jr-collage__glow{display:none}
}
@keyframes jr-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ═════ TOPIC TILES ═════ */
.jr-topics{padding-top:3.4rem}
.jr-topic-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media(min-width:760px){.jr-topic-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}}
.jr .jr-topic-grid li{margin:0;display:flex}
.jr-tile{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;width:100%;
  padding:1.2rem 1.15rem 1.05rem;border-radius:8px;background:#fff;border:1px solid rgba(44,74,53,.08);
  box-shadow:var(--jr-shadow);text-decoration:none;color:var(--text);
  transition:transform .45s var(--jr-ease),box-shadow .45s var(--jr-ease),border-color .3s;
}
.jr-tile::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--jr-ease);
}
.jr-tile:hover,.jr-tile:focus-visible{transform:translateY(-5px);box-shadow:var(--jr-shadow-hi);border-color:transparent}
.jr-tile:hover::after,.jr-tile:focus-visible::after{transform:scaleX(1)}
.jr-tile:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.jr-tile__icon{
  display:grid;place-items:center;width:48px;height:48px;margin-bottom:.95rem;border-radius:8px;
  background:var(--t);color:var(--c);font-size:23px;
  transition:background .4s,color .4s,transform .6s var(--jr-ease),box-shadow .4s;
}
.jr-tile:hover .jr-tile__icon,.jr-tile:focus-visible .jr-tile__icon{background:var(--c);color:#fff;transform:rotate(-8deg) scale(1.08);box-shadow:0 10px 20px -8px var(--c)}
.jr-tile__name{font:600 1.14rem/1.2 'Literata',Georgia,serif;letter-spacing:normal;color:var(--forest)}
.jr-tile__line{margin-top:.4rem;font-size:.82rem;line-height:1.5;color:var(--text-light)}
.jr-tile__foot{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-top:auto;padding-top:1rem}
.jr-tile__count{padding:.28rem .65rem;border-radius:8px;background:var(--t);color:var(--ct);font-size:.72rem;font-weight:700;white-space:nowrap}
.jr-tile__read{margin-left:.35rem;font-size:.7rem;font-weight:700;color:var(--sage-dark);white-space:nowrap}
.jr-tile__go{font-size:20px;color:var(--c);opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .45s var(--jr-ease)}
.jr-tile:hover .jr-tile__go,.jr-tile:focus-visible .jr-tile__go{opacity:1;transform:none}
@media(hover:none){.jr-tile__go{opacity:1;transform:none}}
.jr-tile__new{
  position:absolute;top:1rem;right:1rem;padding:.22rem .55rem;border-radius:8px;
  background:#F3E2BE;color:#4A3510;
  font-size:.8rem;font-weight:600;letter-spacing:normal;text-transform:none;
}
@media(max-width:759.98px){
  .jr-tile{padding:1rem .95rem .9rem;border-radius:8px}
  .jr-tile__icon{width:42px;height:42px;font-size:20px;border-radius:8px;margin-bottom:.75rem}
  .jr-tile__name{font-size:1.02rem}
  .jr-tile__line{font-size:.77rem}
  .jr-tile__new{top:.8rem;right:.8rem}
}

/* ═════ FEATURED ═════ */
.jr-featured{padding-top:3.4rem}
.jr-featured__grid{display:grid;gap:1.25rem}
@media(min-width:1000px){.jr-featured__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:stretch}}
.jr-pick{
  position:relative;isolation:isolate;display:flex;min-height:clamp(420px,58vw,500px);overflow:hidden;
  border-radius:8px;background:var(--forest-dark);text-decoration:none;color:#fff;box-shadow:var(--jr-shadow-hi);
}
.jr-pick .jr-pick__media{position:absolute;inset:0;z-index:-2;aspect-ratio:auto}
.jr-pick__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--jr-ease)}
.jr-pick::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,26,18,0) 20%,rgba(14,26,18,.55) 52%,rgba(14,26,18,.92) 100%)}
.jr-pick:hover .jr-pick__media img{transform:scale(1.06)}
.jr-pick:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.jr-pick__body{align-self:flex-end;padding:clamp(1.3rem,3.4vw,2.3rem)}
.jr .jr-pick__label{
  display:inline-flex;align-items:center;gap:.4rem;margin:0 0 .9rem;padding:.38rem .8rem;border-radius:8px;
  background:#F3E2BE;color:#3F2C0B;
  font-size:.85rem;font-weight:600;letter-spacing:normal;text-transform:none;
}
.jr-pick .jr-topic{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.jr-pick .jr-time{color:rgba(255,255,255,.88)}
.jr .jr-pick h3{margin:.55rem 0 .6rem;color:#fff;font-size:clamp(1.55rem,3.3vw,2.25rem);line-height:1.1;letter-spacing:normal;max-width:24ch}
.jr .jr-pick__blurb{
  margin:0 0 1.2rem;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.86);max-width:58ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.jr-pick__cta{
  display:inline-flex;align-items:center;gap:.55rem;padding:.75rem 1.25rem;border-radius:8px;
  background:#fff;color:var(--forest);font-size:.9rem;font-weight:700;transition:gap .35s var(--jr-ease),background .3s;
}
.jr-pick__cta .ic{font-size:17px}
.jr-pick:hover .jr-pick__cta{gap:.9rem;background:var(--gold-light)}

.jr-latest{
  display:flex;flex-direction:column;padding:1.35rem 1.2rem 1.2rem;border-radius:8px;background:rgba(255,255,255,.72);
  border:1px solid rgba(44,74,53,.08);box-shadow:var(--jr-shadow);
}
.jr .jr-latest__h{
  display:flex;align-items:center;gap:.55rem;margin:0 0 .7rem;padding-left:.45rem;
  font:600 1rem/1 'Mukta',system-ui,sans-serif;letter-spacing:normal;text-transform:none;color:#8A6A33;
}
.jr-latest__h::before{content:"";width:8px;height:8px;border-radius:50%;background:#4A9D63;box-shadow:0 0 0 0 rgba(74,157,99,.5);animation:jr-pulse 2.2s ease-out infinite}
@keyframes jr-pulse{0%{box-shadow:0 0 0 0 rgba(74,157,99,.55)}80%,100%{box-shadow:0 0 0 9px rgba(74,157,99,0)}}
.jr-latest__list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.3rem}
.jr-latest__all{
  display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:auto;padding:.9rem 1rem;border-radius:8px;
  background:var(--forest);color:#fff;font-size:.9rem;font-weight:700;text-decoration:none;
  box-shadow:0 14px 26px -16px rgba(26,46,32,.8);transition:gap .35s var(--jr-ease),background .3s;
}
.jr-latest__all:hover{gap:.85rem;background:var(--forest-dark)}
.jr-latest__all:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.jr-latest__all b{font-weight:800}
.jr-latest__all .ic{font-size:17px}
.jr .jr-latest__list li{margin:0}
.jr-mini{display:flex;align-items:center;gap:.95rem;padding:.6rem;border-radius:8px;text-decoration:none;color:inherit;transition:background .25s,box-shadow .3s,transform .3s var(--jr-ease)}
.jr-mini:hover{background:#fff;box-shadow:0 12px 26px -16px rgba(26,46,32,.4);transform:translateX(3px)}
.jr-mini:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.jr-mini__media{position:relative;flex:0 0 92px;height:92px;border-radius:8px;overflow:hidden;display:grid;place-items:center}
.jr-mini__media img{width:100%;height:100%;object-fit:cover}
.jr-mini__media.jr-art > span,.jr-mini__media.jr-art::before{display:none}
.jr .jr-mini__media.jr-art .ic{font-size:34px;width:1em;height:1em}
.jr-mini__body{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;min-width:0}
.jr-mini__title{
  font:600 1.02rem/1.25 'Literata',Georgia,serif;color:var(--forest);letter-spacing:normal;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s;
}
.jr-mini:hover .jr-mini__title{color:var(--ct)}
.jr-mini__meta{font-size:.74rem;color:var(--text-light)}
.jr-mini .jr-topic{font-size:.58rem;padding:.22rem .55rem}

/* ═════ LIBRARY ═════ */
.jr-library{padding-top:3.2rem;scroll-margin-top:var(--jr-hdr)}

/* Sticky topic rail */
.jr-rail{
  position:sticky;top:var(--jr-hdr);z-index:30;margin:0 calc(-1 * var(--jr-gut));padding:.7rem var(--jr-gut);
  background:#F5EFE4;
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.jr-rail.is-stuck{border-bottom-color:rgba(107,158,122,.2);box-shadow:0 12px 24px -20px rgba(26,46,32,.5)}
.jr-rail__in{
  display:flex;align-items:center;gap:.5rem;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  padding-right:28px;
}
.jr-rail__in::-webkit-scrollbar{display:none}
@media(min-width:1000px){
  .jr-rail__in{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;padding-right:0}
}
.jr-chip,.jr-rail__search{
  flex:none;display:inline-flex;align-items:center;gap:.45rem;height:40px;border-radius:8px;
  background:#fff;border:1px solid rgba(44,74,53,.1);color:var(--forest);text-decoration:none;cursor:pointer;
  font:600 .83rem/1 'Mukta',system-ui,sans-serif;white-space:nowrap;
  transition:transform .25s var(--jr-ease),border-color .2s,background .25s,color .25s,box-shadow .25s;
}
.jr-chip{padding:0 .5rem 0 .8rem}
.jr-rail__search{width:40px;justify-content:center;padding:0;font-size:18px;color:var(--sage-dark)}
.jr-chip .ic{font-size:17px;color:var(--c);transition:color .25s}
.jr-chip b{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:8px;
  background:var(--t);color:var(--ct);font-size:.7rem;transition:background .25s,color .25s;
}
.jr-chip:hover,.jr-rail__search:hover{border-color:var(--c);transform:translateY(-1px);box-shadow:0 8px 16px -12px rgba(26,46,32,.5)}
.jr-chip:focus-visible,.jr-rail__search:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.jr-chip[aria-current="true"]{background:var(--ct);border-color:var(--ct);color:#fff;box-shadow:0 10px 20px -12px var(--ct)}
.jr-chip[aria-current="true"] .ic{color:#fff}
.jr-chip[aria-current="true"] b{background:rgba(255,255,255,.22);color:#fff}
.jr-chip.has-new::after{content:"";width:7px;height:7px;margin-left:-.1rem;border-radius:50%;background:#D9A441;box-shadow:0 0 0 2px #fff}

/* Results bar */
.jr-results{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin:1.4rem 0 .2rem}
.jr .jr-results__text{margin:0;font-size:1.02rem;color:var(--text)}
.jr-results__text strong{color:var(--forest)}
.jr-results__text span{display:block;margin-top:.1rem;font-size:.86rem;color:var(--text-light)}
.jr-results__clear{
  display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border-radius:8px;cursor:pointer;
  background:#fff;border:1px solid rgba(44,74,53,.14);color:var(--forest);font:700 .82rem/1 'Mukta',system-ui,sans-serif;
  transition:border-color .2s,background .2s;
}
.jr-results__clear:hover{border-color:var(--sage);background:#FBF9F3}
.jr-results__clear .ic{font-size:14px}

/* Shelves */
.jr-shelf{padding-top:2.8rem;scroll-margin-top:calc(var(--jr-hdr) + 120px)}
.jr-shelf__head{display:flex;align-items:center;gap:.95rem;margin-bottom:1.25rem}
.jr-shelf__icon{
  flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:8px;font-size:24px;
  background:var(--t);color:var(--ct);
}
.jr-shelf__title{flex:1;min-width:0}
.jr-shelf__title h2{margin:0;font-size:clamp(1.4rem,3vw,1.85rem);letter-spacing:normal}
.jr .jr-shelf__title p{margin:.15rem 0 0;font-size:.9rem;line-height:1.5;color:var(--text-light)}
.jr-shelf__all{
  display:none;flex:none;align-items:center;gap:.35rem;padding:.45rem .8rem;border-radius:8px;
  background:var(--t);color:var(--ct);font-size:.78rem;font-weight:700;text-decoration:none;
}
.jr-shelf__all b{font-weight:800}

/* Card grid — 12 columns on wide screens. Every shelf fills whole rows
   of thirds, opening with a row or two of wider halves when its count
   isn't a multiple of three, so no shelf ends on a lonely orphan:
     2 → 2 · 3 → 3 · 4 → 2+2 · 5 → 2+3 · 6 → 3+3 · 7 → 2+2+3 · 8 → 2+3+3 */
.jr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.jr .jr-item{margin:0;display:flex;container-type:inline-size}

/* Tablet: two across; an odd-sized shelf opens with one wide card */
@media(min-width:640px) and (max-width:999.98px){
  .jr-shelves .jr-item:first-child:nth-last-child(odd){grid-column:1/-1}
}
@media(min-width:1000px){
  .jr-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem}
  .jr .jr-item{grid-column:span 4}
  .jr .jr-found .jr-item{grid-column:auto}
  .jr-shelves .jr-item:only-child{grid-column:1/-1}
  .jr-shelves .jr-item:first-child:nth-last-child(3n+2),
  .jr-shelves .jr-item:first-child:nth-last-child(3n+2) + .jr-item,
  .jr-shelves .jr-item:first-child:nth-last-child(3n+4),
  .jr-shelves .jr-item:first-child:nth-last-child(3n+4) ~ .jr-item:nth-child(-n+4){grid-column:span 6}
}

/* Card */
.jr-card{
  position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;
  border-radius:8px;background:#fff;border:1px solid rgba(44,74,53,.07);box-shadow:var(--jr-shadow);
  text-decoration:none;color:inherit;
  transition:transform .45s var(--jr-ease),box-shadow .45s var(--jr-ease);
}
.jr-card:hover{transform:translateY(-6px);box-shadow:var(--jr-shadow-hi)}
.jr-card:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.jr-card__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--t)}
.jr-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--jr-ease)}
.jr-card:hover .jr-card__media img{transform:scale(1.07)}
/* "Open" button that rises on hover */
.jr-card .jr-card__media::after{
  content:"";position:absolute;right:14px;bottom:14px;z-index:2;width:42px;height:42px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4A35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/19px no-repeat;
  box-shadow:0 10px 22px -8px rgba(26,46,32,.45);opacity:0;transform:translateY(10px) scale(.85);
  transition:opacity .35s,transform .45s var(--jr-ease);
}
.jr-card:hover .jr-card__media::after,.jr-card:focus-visible .jr-card__media::after{opacity:1;transform:none}
.jr-card__body{display:flex;flex-direction:column;flex:1;padding:1.05rem 1.15rem 1.1rem}
.jr .jr-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .65rem;margin:0 0 .65rem}
.jr-topic{
  display:inline-block;padding:.28rem .65rem;border-radius:8px;background:var(--t);color:var(--ct);
  font-size:.8rem;font-weight:700;letter-spacing:normal;line-height:1.25;text-transform:none;
}
.jr-time{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;color:var(--text-light);white-space:nowrap}
.jr-time .ic{font-size:14px}
.jr .jr-card h3{margin:0 0 .5rem;font-size:1.16rem;line-height:1.25;letter-spacing:normal;color:var(--forest);transition:color .25s}
.jr-card:hover h3{color:var(--ct)}
.jr .jr-card__blurb{
  margin:0 0 .95rem;font-size:.86rem;line-height:1.6;color:var(--text-light);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.jr .jr-card__foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem .8rem;margin:auto 0 0;padding-top:.8rem;
  border-top:1px dashed rgba(44,74,53,.14);font-size:.72rem;color:var(--text-light);
}
.jr-card__foot span{display:inline-flex;align-items:center;gap:.3rem}
.jr-card__foot span::before{
  content:"";width:13px;height:13px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A7C59' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.3-3 7.9-7 9.5-4-1.6-7-5.2-7-9.5V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Narrow cards (quarters): tighter type */
@container (max-width:290px){
  .jr .jr-card h3{font-size:1.03rem}
  .jr-card__body{padding:.95rem 1rem 1rem}
  .jr .jr-card__blurb{-webkit-line-clamp:2;font-size:.84rem}
}
/* Wide cards (halves on desktop, tablet openers) */
@container (min-width:420px){
  .jr-card__media{aspect-ratio:16/9}
  .jr .jr-card h3{font-size:1.45rem}
  .jr .jr-card__blurb{font-size:.92rem}
}
@container (min-width:600px){
  .jr-card{flex-direction:row}
  .jr-card__media{flex:0 0 48%;aspect-ratio:auto;min-height:260px}
  .jr-card__body{padding:1.5rem 1.6rem}
}

/* Designed tiles for articles without a photo */
.jr-art{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.7),transparent 55%),linear-gradient(135deg,var(--t),var(--g));
  color:var(--ct);
}
.jr-art::before{
  content:"";position:absolute;width:44%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);box-shadow:0 0 0 22px rgba(255,255,255,.18),0 0 0 48px rgba(255,255,255,.1);
  transition:transform 1.2s var(--jr-ease);
}
.jr .jr-art .ic{position:relative;width:56px;height:56px;stroke-width:1.25;filter:drop-shadow(0 8px 16px rgba(26,46,32,.18));transition:transform .9s var(--jr-ease)}
.jr-art > span{position:relative;font-size:.8rem;font-weight:800;letter-spacing:normal;text-transform:none}
.jr-card:hover .jr-art .ic{transform:scale(1.12) rotate(-5deg)}
.jr-card:hover .jr-art::before{transform:scale(1.15)}
.jr-art--cinema{
  color:#EBD3A6;
  background:radial-gradient(90% 70% at 50% -5%,#6A4470,transparent 70%),linear-gradient(160deg,#2C1C32,#130C17);
}
.jr-art--night{
  color:#EBD3A6;
  background:
    radial-gradient(1.4px 1.4px at 14% 22%,#fff,transparent),radial-gradient(1px 1px at 32% 70%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 58% 16%,#fff,transparent),radial-gradient(1px 1px at 76% 44%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 88% 78%,#fff,transparent),radial-gradient(1px 1px at 44% 88%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 8% 60%,#fff,transparent),radial-gradient(1px 1px at 66% 90%,#fff,transparent),
    radial-gradient(80% 60% at 72% 8%,#3A5088,transparent 70%),linear-gradient(170deg,#1A2548,#0A0F24);
}
.jr-art--cinema::before,.jr-art--night::before{border-color:rgba(235,211,166,.35);box-shadow:0 0 0 22px rgba(235,211,166,.07),0 0 0 48px rgba(235,211,166,.04)}

/* Badges the script adds */
.jr .jr-badge{
  position:absolute;top:12px;z-index:2;display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .65rem;border-radius:8px;
  font-size:.8rem;font-weight:800;letter-spacing:normal;text-transform:none;line-height:1.2;
}
.jr-badge--new{left:12px;background:#F3E2BE;color:#3F2C0B}
.jr-badge--read{right:12px;background:rgba(255,255,255,.94);color:var(--sage-dark);box-shadow:0 6px 16px -8px rgba(26,46,32,.45)}
.jr-badge--read .ic{font-size:13px;stroke-width:2.4}
.jr-item.is-read .jr-card__media img{filter:saturate(.8)}

/* Search highlight */
mark.jr-hl{background:linear-gradient(transparent 55%,rgba(227,189,119,.75) 55%);color:inherit;padding:0 .04em;border-radius:2px}

/* ── Search / topic results: one flat, ranked grid ── */
.jr-found{list-style:none;margin:0;padding:1rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media(max-width:999.98px){.jr-found{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}}

/* Phones: each shelf is a swipeable row; results are a compact list */
@media(max-width:639.98px){
  .jr-grid{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--jr-gut));padding:.2rem var(--jr-gut) 1.1rem;scroll-padding:0 var(--jr-gut)}
  .jr-grid::-webkit-scrollbar{display:none}
  .jr .jr-shelves .jr-item{flex:0 0 min(82%,330px);scroll-snap-align:start}
  .jr-js .jr-shelf__all{display:inline-flex}
  .jr-shelf{padding-top:2.2rem}
  .jr-shelf__head{gap:.75rem;margin-bottom:.9rem}
  .jr-shelf__icon{width:44px;height:44px;font-size:21px;border-radius:8px}
  .jr .jr-shelf__title p{display:none}

  .jr-found{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .jr-found .jr-card{flex-direction:row;border-radius:8px}
  .jr-found .jr-card__media{flex:0 0 34%;aspect-ratio:auto;min-height:100%}
  .jr-found .jr-card__media::after{display:none}
  .jr-found .jr-card__body{padding:.8rem .9rem}
  .jr-found .jr-card h3{font-size:1rem;margin-bottom:.35rem}
  .jr-found .jr-card__blurb{-webkit-line-clamp:2;font-size:.8rem;margin-bottom:.5rem}
  .jr-found .jr-card__foot{display:none}
  .jr-found .jr-art .ic{width:36px;height:36px}
  .jr-found .jr-art > span,.jr-found .jr-art::before{display:none}
  .jr-found .jr-badge{top:8px;padding:.22rem .45rem;font-size:.56rem}
  .jr-found .jr-badge--new{left:8px}
  .jr-found .jr-badge--read{right:auto;left:8px;top:auto;bottom:8px}

  .jr-hero h1{margin-top:.9rem}
  .jr-search{height:58px}
  .jr-search__icon{left:19px}
  .jr-search input{padding-left:3.3rem}
  .jr-stats{gap:.45rem 1rem;font-size:.8rem}
}

/* Empty state */
.jr-empty{max-width:560px;margin:0 auto;padding:2.8rem 1rem 1rem;text-align:center}
.jr-empty__icon{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 1rem;border-radius:50%;background:var(--t);color:var(--ct);font-size:28px}
.jr-empty h2{margin:0 0 .5rem;font-size:1.65rem}
.jr .jr-empty__text{margin:0 0 1rem;color:var(--text-light)}
.jr-empty__try{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem}
.jr .jr-empty__try{margin:0 0 1.3rem}
.jr .jr-empty__cta{background:var(--sage-dark);color:#fff;box-shadow:0 12px 24px -12px rgba(74,124,89,.7)}
.jr .jr-empty__cta:hover{background:var(--forest)}

/* ═════ HOW WE WRITE ═════ */
.jr-trust{padding-top:4.2rem}
.jr-trust__grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.jr .jr-trust__grid li{margin:0;padding:1.45rem 1.35rem;border-radius:8px;background:#fff;border:1px solid rgba(44,74,53,.08);box-shadow:var(--jr-shadow)}
.jr-trust__icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:.95rem;border-radius:8px;background:#F5E6C6;color:#6E4F16;font-size:22px}
.jr .jr-trust h3{margin:0 0 .45rem;font-size:1.15rem}
.jr .jr-trust__grid p{margin:0;font-size:.9rem;line-height:1.65;color:var(--text-light)}
.jr-next{margin-top:1.6rem;padding:1.5rem 1.6rem;border-radius:8px;border:1px dashed rgba(107,158,122,.45);background:rgba(255,255,255,.5)}
.jr .jr-next h2{margin:0 0 .5rem;font-size:1.35rem}
.jr .jr-next p{margin:0;max-width:78ch}

/* ═════ MOTION ═════ */
.jr-reveal{opacity:0;transform:translateY(22px)}
.jr-reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--jr-ease),transform .8s var(--jr-ease);transition-delay:var(--d,0ms)}
.jr-pop{animation:jr-pop .55s var(--jr-ease) both;animation-delay:var(--d,0ms)}
@keyframes jr-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .jr *,.jr *::before,.jr *::after{animation:none!important;transition:none!important}
  .jr-reveal{opacity:1;transform:none}
  .jr-card:hover,.jr-tile:hover,.jr-mini:hover,.jr-try__chip:hover,.jr-chip:hover{transform:none}
  .jr-card:hover .jr-card__media img,.jr-pick:hover .jr-pick__media img{transform:none}
}