/* Articles — loaded on the listing, topic/tag/language archives, search and single articles.
   Builds on the tokens, buttons and mascot crop in style.css. */


/* ---------- Listing hero: pink sky, copy and search, the studying mascot ---------- */
.is-journal-list .site-header{background:#fdf1ef;border-color:transparent;backdrop-filter:none}
.is-journal-list .site-header.is-stuck{background:#fdf2f0e6;backdrop-filter:blur(16px);border-color:#f6e2df;box-shadow:0 10px 30px #22201e0a}
.jr-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(22px,2.6vw,40px) clamp(58px,5.6vw,84px);background:linear-gradient(180deg,#fdf1ef 0%,#fbe9e5 62%,var(--paper) 100%)}
.jr-hero::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#f1d3cc 1.3px,transparent 1.3px);background-size:26px 26px;mask-image:radial-gradient(ellipse 34% 60% at 30% 55%,#000 5%,transparent 70%);opacity:.8}
.jr-cloud{position:absolute;z-index:-1;border-radius:999px;background:#fff;filter:blur(28px);opacity:.75}
.jr-cloud-1{width:380px;height:130px;left:3%;top:12%}
.jr-cloud-2{width:300px;height:110px;right:34%;bottom:6%;opacity:.55}
.jr-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(20px,3.6vw,56px);align-items:center}
.jr-hero-copy{min-width:0}
.jr-hero h1{margin:0 0 12px;font-size:clamp(32px,3.8vw,54px);font-weight:800;line-height:1.42;letter-spacing:-1.4px;text-wrap:balance}
.jr-hero h1 span{display:block}
.jr-title-accent{color:var(--brand)}
.jr-lead{max-width:500px;font-size:clamp(15.5px,1.15vw,17px);line-height:2.05;color:var(--muted)}
.jr-search{display:flex;align-items:center;gap:10px;max-width:520px;min-height:64px;margin-top:26px;padding-block:7px;padding-inline:24px 7px;border-radius:999px;background:#fff;border:1px solid #f1dcd6;box-shadow:0 18px 40px #db2c2712;transition:border-color var(--fast),box-shadow var(--fast)}
.jr-search:focus-within{border-color:#eab8b0;box-shadow:0 0 0 4px #db2c2716,0 18px 40px #db2c2714}
.jr-search input{flex:1;min-width:0;min-height:48px;border:0;background:none;font-size:15.5px;color:var(--ink);outline:none}
.jr-search input::placeholder{color:#a39a90}
.jr-search input::-webkit-search-cancel-button{display:none}
.jr-search-go{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:50%;background:var(--brand);color:#fff;box-shadow:0 10px 20px #db2c2733;transition:background var(--fast),transform var(--fast)}
.jr-search-go:hover{background:var(--brand-hover);transform:scale(1.05)}
.jr-search-go .icon{width:22px;height:22px;stroke-width:2}
.jr-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-top:14px;padding-inline:8px;font-size:13.5px;color:var(--soft)}
.jr-suggest span{margin-inline-end:8px}
.jr-suggest a{color:var(--ink-2);transition:color var(--fast)}
.jr-suggest a+a::before{content:'•';margin-inline:9px;color:#dcc4bb}
.jr-suggest a:hover{color:var(--brand)}

.jr-art{position:relative;justify-self:center;width:min(480px,86%);direction:ltr}
.jr-halo{position:absolute;inset:6% 4% 0;border-radius:50%;background:radial-gradient(closest-side,#fffffff2 0,#ffffff80 55%,#fff0 100%)}
.jr-art-stage{position:relative;z-index:2}
.jr-art-stage img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 26px #b8302a24)}
.jr-art-stage.is-hop img{animation:jr-hop 640ms var(--ease)}
.jr-glow{position:absolute;z-index:3;left:74%;top:57%;width:32%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#fff7d9d9 0,#ffeeb566 45%,#ffe9a300 100%);mix-blend-mode:screen;pointer-events:none;opacity:.55}
.jr-aha{position:absolute;z-index:5;left:78%;top:4%;display:grid;place-items:center;width:46px;height:46px;border-radius:50% 50% 50% 8px;background:var(--brand);color:#fff;font-size:27px;font-weight:800;line-height:1;box-shadow:0 12px 24px #db2c2745;opacity:0;transform:scale(.3) rotate(-20deg);transition:opacity 220ms,transform 420ms cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.jr-aha.is-on{opacity:1;transform:none}
.jr-book{position:absolute;z-index:6;left:32%;top:66%;width:58%;height:28%;border-radius:40%;cursor:pointer}
.jr-book:focus-visible{outline:3px dashed var(--brand);outline-offset:2px}
.jr-tile{position:absolute;z-index:3;display:grid;place-items:center;border-radius:18px;background:#fff;box-shadow:0 16px 32px #b8302a1f,0 2px 6px #22201e0d}
.jr-tile-aa{left:0;top:34%;width:66px;height:58px;rotate:-9deg;font-family:"Talkino English",sans-serif;font-size:24px;font-weight:800;color:var(--ink)}
.jr-tile-bulb{left:9%;top:3%;width:58px;height:58px;rotate:8deg;background:#fff6dc;color:#c27a12}
.jr-tile-bulb .icon{width:28px;height:28px}
.jr-tile-note{right:0;top:0;width:78px;height:58px;padding:13px 14px;rotate:7deg;display:grid;gap:6px;align-content:center;border-radius:18px 18px 18px 5px}
.jr-tile-note i{display:block;height:6px;border-radius:4px;background:#ecdcd6}
.jr-tile-note i:nth-child(2){width:74%}
.jr-tile-note i:nth-child(3){width:52%;background:#f4c0be}
.jr-spark{position:absolute;z-index:3;background:var(--brand);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.jr-spark-1{width:26px;height:26px;left:48%;top:0}
.jr-spark-2{width:18px;height:18px;right:3%;top:52%;background:var(--ink)}
.jr-dot{position:absolute;z-index:1;border-radius:50%}
.jr-dot-1{width:14px;height:14px;left:6%;bottom:18%;background:var(--pink)}
.jr-dot-2{width:10px;height:10px;right:12%;bottom:6%;background:#e9c46a}

@keyframes jr-hop{0%,100%{transform:none}35%{transform:translateY(-12px) scale(1.02,.98)}60%{transform:translateY(0) scale(1.02,.97)}80%{transform:translateY(-3px)}}
@keyframes jr-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes jr-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes jr-glow{0%,100%{opacity:.4}50%{opacity:.85}}
@keyframes jr-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.7) rotate(45deg)}}
@media (prefers-reduced-motion:no-preference){
  .jr-rise{animation:jr-rise .7s var(--ease) both}
  .jr-lead.jr-rise{animation-delay:.14s}
  .jr-search.jr-rise{animation-delay:.2s}
  .jr-suggest.jr-rise{animation-delay:.26s}
  .jr-art-stage{animation:jr-rise .8s .12s var(--ease) both}
  .jr-tile{animation:jr-float 6s ease-in-out infinite}
  .jr-tile-bulb{animation-delay:-2s}
  .jr-tile-note{animation-delay:-4s}
  .jr-glow{animation:jr-glow 4.5s ease-in-out infinite}
  .jr-spark{animation:jr-twinkle 3.6s ease-in-out infinite}
  .jr-spark-2{animation-delay:-1.8s}
}

/* ---------- One bar of topics, each with its own icon ---------- */
.jr-topics{position:relative;z-index:3;margin-top:-32px}
.jr-topics-bar{display:flex;align-items:center;gap:8px;padding:8px;border-radius:999px;background:#fff;border:1px solid #f0e3dc;box-shadow:0 18px 44px #22201e0e}
.jr-topics-list{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.jr-topics-list::-webkit-scrollbar{display:none}
.jr-topics-list li{flex:none}
.jr-topic{--accent:var(--brand);display:inline-flex;align-items:center;gap:10px;min-height:52px;padding-block:6px;padding-inline:7px 18px;border-radius:999px;white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--ink-2);transition:background var(--fast),color var(--fast)}
.jr-topic:hover{background:var(--paper);color:var(--ink)}
.jr-topic-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent);transition:background var(--fast),color var(--fast)}
.jr-topic-icon .icon,.jr-topic-icon svg{width:20px;height:20px}
.jr-topic[aria-current]{background:color-mix(in srgb,var(--accent) 9%,#fff);color:color-mix(in srgb,var(--accent) 82%,#000);font-weight:700}
.jr-topic[aria-current] .jr-topic-icon{background:var(--accent);color:#fff}
.jr-topics-rule{width:1px;height:28px;margin-inline:6px;background:var(--line)}
.jr-topics-next{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);color:var(--ink-2);transition:border-color var(--fast),transform var(--medium) var(--ease)}
.jr-topics-next:hover{border-color:var(--ink)}
.jr-topics-next .icon{width:18px;height:18px}
.jr-topics-next.is-end{transform:scaleX(-1)}

/* ---------- The list ---------- */
.jr-list{padding-block:clamp(34px,3.6vw,52px)}
.jr-list-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.jr-list-head h2{display:flex;align-items:center;gap:12px;font-size:clamp(21px,1.9vw,26px);font-weight:800;letter-spacing:-.5px}
.jr-list-head h2::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px #db2c271a}
.jr-list-count{padding:4px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted)}
.jr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}

/* The article card: cover, topic, two-line title, date and reading time. */
.jr-card{--accent:var(--brand);position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--line);transition:transform var(--medium) var(--ease),box-shadow var(--medium) var(--ease),border-color var(--fast)}
.jr-card:hover{transform:translateY(-4px);border-color:#e3d3c6;box-shadow:0 24px 46px #22201e10,0 3px 10px #22201e06}
.jr-card:has(.jr-card-title a:focus-visible){outline:3px solid var(--brand);outline-offset:3px}
.jr-card-title a:focus-visible{outline:none}
.jr-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--cream)}
.jr-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.jr-card:hover .jr-card-media img{transform:scale(1.045)}
/* No featured image: a cover drawn from the topic — a tile with its icon, a note, a speech bubble. */
.jr-card-media.is-art{display:grid;place-items:center;isolation:isolate;background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--accent) 16%,#fff) 0 17%,transparent 17.5%),linear-gradient(140deg,color-mix(in srgb,var(--accent) 12%,#fff8f5) 0%,color-mix(in srgb,var(--accent) 5%,#fff) 100%);border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,var(--line))}
.jr-card-media.is-art::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(color-mix(in srgb,var(--accent) 22%,#fff) 1.2px,transparent 1.2px);background-size:18px 18px;mask-image:radial-gradient(ellipse 50% 60% at 50% 50%,#000,transparent 75%);opacity:.8}
.jr-art-tile{display:grid;place-items:center;width:78px;height:78px;border-radius:24px;background:#fff;color:var(--accent);box-shadow:0 18px 32px color-mix(in srgb,var(--accent) 20%,transparent),0 2px 6px #22201e0d;rotate:-6deg;transition:rotate var(--medium) var(--ease),transform var(--medium) var(--ease)}
.jr-art-tile .icon{width:36px;height:36px;stroke-width:1.6}
.jr-card:hover .jr-art-tile{rotate:0deg;transform:scale(1.06)}
.jr-art-bubble{position:absolute;inset-inline-end:11%;top:16%;width:66px;height:44px;border-radius:16px 16px 16px 4px;border:2px dashed color-mix(in srgb,var(--accent) 38%,#fff);rotate:-6deg}
.jr-art-lines{position:absolute;inset-inline-start:10%;bottom:15%;display:grid;gap:6px;width:92px;padding:12px;border-radius:14px;background:#ffffffc7;rotate:6deg;box-shadow:0 10px 20px #22201e0a}
.jr-art-lines i{display:block;height:6px;border-radius:4px;background:color-mix(in srgb,var(--accent) 24%,#fff)}
.jr-art-lines i:nth-child(2){width:72%}
.jr-art-lines i:nth-child(3){width:54%;background:color-mix(in srgb,var(--accent) 55%,#fff)}
.jr-art-spark{position:absolute;inset-inline-start:22%;top:17%;width:16px;height:16px;background:var(--accent);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.jr-art-word{position:absolute;inset-inline-end:10%;bottom:14%;padding:3px 12px;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--lang) 25%,#fff);font-family:"Talkino English",sans-serif;font-size:13px;font-weight:800;color:var(--lang);rotate:-4deg}
.jr-card-body{display:flex;flex-direction:column;flex:1;gap:10px;padding:16px 20px}
.jr-card-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.jr-card-topic{padding:3px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,#fff);font-size:13px;font-weight:700;color:color-mix(in srgb,var(--accent) 80%,#000)}
.jr-card-lang{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.jr-card-lang i{width:7px;height:7px;border-radius:50%;background:var(--lang)}
.jr-card-title{font-size:17.5px;font-weight:800;line-height:1.72;letter-spacing:-.3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.jr-card-title a::after{content:'';position:absolute;inset:0;z-index:1}
.jr-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:auto;padding-top:13px;border-top:1px dashed var(--line);font-size:13px;color:var(--soft)}
.jr-card-foot>span{display:inline-flex;align-items:center;gap:7px}
.jr-card-foot .icon{width:16px;height:16px;color:#b9aca0}
.jr-card-foot time{font-weight:600;color:var(--ink-2)}

.jr-pages{margin-top:clamp(28px,3vw,40px)}
.jr-pages ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.jr-pages .page-numbers{display:grid;place-items:center;min-width:46px;height:46px;padding-inline:12px;border-radius:14px;background:#fff;border:1px solid var(--line);font-family:var(--font-num);font-size:15px;font-weight:700;line-height:1;transition:border-color var(--fast),background var(--fast)}
.jr-pages a.page-numbers:hover{border-color:var(--ink)}
.jr-pages .current{background:var(--ink);border-color:var(--ink);color:#fff}
.jr-pages .dots{background:none;border:0}
.jr-pages .icon{width:18px;height:18px}
.jr-pages .icon.is-prev{transform:scaleX(-1)}

.jr-empty{display:grid;justify-items:center;gap:10px;padding:40px 24px;border-radius:24px;background:#fff;border:1px dashed var(--line);text-align:center}
.jr-empty h3{font-size:20px;font-weight:800}
.jr-empty p{max-width:440px;font-size:15px;color:var(--muted)}
.jr-empty .button{margin-top:6px}

/* ---------- Placement banner ---------- */
.jr-cta{padding-bottom:clamp(56px,6vw,90px)}
.jr-cta-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:20px;min-height:230px;padding:clamp(26px,3vw,40px) clamp(24px,3.6vw,52px);border-radius:30px;background:linear-gradient(110deg,#fff 0%,#fdf1ee 46%,#f8dbd4 100%);border:1px solid #f3dcd6}
.jr-cta-card::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#efc9c1 1.3px,transparent 1.3px);background-size:22px 22px;mask-image:radial-gradient(ellipse 36% 70% at 18% 50%,#000 5%,transparent 72%)}
.jr-cta-kicker{font-size:15px;font-weight:800;color:var(--brand)}
.jr-cta-copy h2{margin-top:8px;font-size:clamp(21px,2.1vw,29px);font-weight:800;line-height:1.55;letter-spacing:-.6px;text-wrap:balance}
.jr-cta-copy>p:not(.jr-cta-kicker){margin-top:8px;max-width:460px;font-size:15px;color:var(--muted)}
.jr-cta-go{display:inline-flex;align-items:center;gap:12px;min-height:52px;margin-top:20px;padding:0 26px;border-radius:999px;background:var(--brand);color:#fff;font-size:15px;font-weight:700;box-shadow:0 14px 28px #db2c2738;transition:background var(--fast),transform var(--fast)}
.jr-cta-go:hover{background:var(--brand-hover);transform:translateY(-2px)}
.jr-cta-go .icon{width:18px;height:18px;transition:transform var(--fast)}
.jr-cta-go:hover .icon{transform:translateX(-4px)}
.jr-cta-art{position:relative;height:210px;direction:ltr}
.jr-cta-sheet{position:absolute;left:4%;top:4%;display:grid;gap:12px;width:150px;padding:18px 16px;border-radius:18px;background:#fff;box-shadow:0 20px 40px #b8302a1f;rotate:-7deg}
.jr-cta-sheet b{display:block;width:62%;height:9px;border-radius:5px;background:var(--ink);opacity:.85;margin-bottom:2px}
.jr-cta-sheet i{display:flex;align-items:center;gap:9px;height:18px}
.jr-cta-sheet i::before{content:'';flex:none;width:17px;height:17px;border-radius:6px;border:2px solid #e6d8cc;box-sizing:border-box}
.jr-cta-sheet i::after{content:'';flex:1;height:7px;border-radius:4px;background:#f0e6dc}
.jr-cta-sheet i.is-done::before{border:0;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/11px no-repeat}
.jr-cta-bars{position:absolute;right:3%;top:10%;display:flex;align-items:flex-end;gap:6px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 16px 30px #b8302a1a;rotate:6deg}
.jr-cta-bars i{width:12px;border-radius:5px;background:var(--brand)}
.jr-cta-bars i:nth-child(1){height:22px;opacity:.45}
.jr-cta-bars i:nth-child(2){height:36px;opacity:.7}
.jr-cta-bars i:nth-child(3){height:52px}
.jr-cta-mascot{position:absolute;z-index:2;left:30%;bottom:-18px;width:230px}
.jr-cta-mascot img{filter:drop-shadow(0 16px 20px #b8302a26)}
.jr-cta-spark{width:22px;height:22px;right:30%;top:0}
@media (prefers-reduced-motion:no-preference){
  .jr-cta-sheet,.jr-cta-bars{animation:jr-float 7s ease-in-out infinite}
  .jr-cta-bars{animation-delay:-3s}
  .jr-cta-card:hover .jr-cta-mascot img{transform:translateY(-6px) rotate(-2deg)}
}

/* ---------- One article ---------- */
/* The banner: title and cover in one piece — text on the start side, the featured image (or art
   drawn from the topic) on the other, faded into the text. */
.jr-banner{--banner-bg:color-mix(in srgb,var(--accent) 5%,#faf3ec);position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"copy media";max-width:1120px;min-height:clamp(290px,25vw,360px);margin-top:clamp(18px,2vw,28px);overflow:hidden;border-radius:30px;background:var(--banner-bg);border:1px solid color-mix(in srgb,var(--accent) 10%,var(--line))}
.jr-banner-copy{grid-area:copy;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,44px) clamp(24px,3.2vw,48px)}
.jr-banner-media{grid-area:media;position:relative;margin-inline-start:-16%}
.jr-banner-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jr-banner-media::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to right,transparent 42%,var(--banner-bg) 96%);pointer-events:none}
.jr-banner-art{position:absolute;inset:0;display:grid;place-items:center;padding-inline-start:16%;background:radial-gradient(circle at 26% 24%,color-mix(in srgb,var(--accent) 15%,#fff) 0 15%,transparent 15.5%),linear-gradient(140deg,color-mix(in srgb,var(--accent) 12%,#fff8f5) 0%,color-mix(in srgb,var(--accent) 5%,#fff) 100%)}
.jr-banner-art::before{content:'';position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--accent) 22%,#fff) 1.3px,transparent 1.3px);background-size:22px 22px;mask-image:radial-gradient(ellipse 45% 55% at 45% 50%,#000,transparent 75%)}
.jr-banner .jr-art-tile{position:relative;width:118px;height:118px;border-radius:34px}
.jr-banner .jr-art-tile .icon{width:54px;height:54px;stroke-width:1.5}
.jr-banner .jr-art-bubble{inset-inline-end:auto;left:12%;top:18%;width:92px;height:62px;border-radius:20px 20px 20px 5px}
.jr-banner .jr-art-lines{inset-inline-start:auto;right:22%;bottom:16%;width:126px;padding:15px}
.jr-banner .jr-art-lines i{height:8px}
.jr-banner .jr-art-spark{inset-inline-start:auto;right:28%;top:18%;width:22px;height:22px}
.jr-banner .jr-art-word{inset-inline-end:auto;left:14%;bottom:16%;font-size:15px;padding:4px 14px}
.jr-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:13.5px;color:var(--soft)}
.jr-crumbs li+li::before{content:'/';margin-inline:10px;color:#cdbfb0}
.jr-crumbs a{transition:color var(--fast)}
.jr-crumbs a:hover{color:var(--brand)}
.jr-head-title{margin-top:16px;font-size:clamp(26px,2.9vw,40px);font-weight:800;line-height:1.5;letter-spacing:-1px;text-wrap:balance}
.jr-head-lead{margin-top:12px;max-width:600px;font-size:clamp(15px,1.15vw,16.5px);line-height:2.05;color:var(--muted)}
.jr-head-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px}
.jr-head-meta li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.jr-head-meta .icon{width:18px;height:18px;color:var(--brand)}
.jr-head-meta time{font-weight:700;color:var(--ink-2)}

.jr-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,4vw,56px);align-items:start;max-width:1120px;margin-top:clamp(28px,3vw,44px)}
.jr-main{min-width:0}

/* The rail: contents, a question, related articles, the social bar */
.jr-aside{display:grid;gap:16px;align-content:start;min-width:0}
@media (min-width:901px){.jr-aside{position:sticky;top:var(--rail-top,100px)}}
.jr-side{padding:18px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.jr-side-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.jr-side-head h2{font-size:16px;font-weight:800}
.jr-side-head .icon{width:20px;height:20px;color:var(--brand)}
.jr-toc-list{display:grid;gap:2px}
.jr-toc-list a{display:flex;align-items:flex-start;gap:12px;padding:7px 6px;border-radius:12px;font-size:14.5px;font-weight:600;line-height:1.75;color:var(--ink-2);transition:background var(--fast),color var(--fast)}
.jr-toc-list a:hover{background:var(--paper);color:var(--ink)}
.jr-toc-list b{display:grid;place-items:center;flex:none;width:26px;height:26px;margin-top:0;border-radius:50%;background:var(--cream);font-family:var(--font-num);font-size:13px;font-weight:700;line-height:1;color:var(--muted);transition:background var(--fast),color var(--fast)}
.jr-toc-list a.is-active{color:var(--ink);font-weight:700}
.jr-toc-list a.is-active b{background:var(--brand);color:#fff}
.jr-toc[data-long]:not(.is-open) .jr-toc-list{max-height:360px;overflow:hidden;mask-image:linear-gradient(#000 72%,transparent)}
.jr-toc-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;margin-top:6px;border-radius:12px;font-size:14px;font-weight:700;color:var(--brand-deep)}
.jr-toc-more:hover{background:var(--paper)}
.jr-toc-more .icon{width:18px;height:18px;transition:transform var(--fast)}
.jr-toc.is-open .jr-toc-more .icon{transform:rotate(180deg)}

.jr-ask{overflow:hidden;padding-bottom:18px;background:linear-gradient(135deg,#fff 0%,#fdf0ec 100%);border-color:#f3dcd6}
.jr-ask h2{font-size:18px;font-weight:800}
.jr-ask-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:4px}
.jr-ask-foot .jr-ask-go{margin-bottom:6px}
/* The whole illustration, uncropped, sitting on the card's bottom edge */
.jr-ask-art{flex:none;width:136px;margin-bottom:-18px;margin-inline-end:-8px}
.jr-ask-art img{display:block;width:100%;height:auto;transform-origin:50% 100%;transition:transform var(--medium) var(--ease)}
.jr-ask:hover .jr-ask-art img{transform:translateY(-3px) rotate(-2deg)}
.jr-ask p{margin-top:4px;font-size:13.5px;line-height:1.9;color:var(--muted)}
.jr-ask-go{display:inline-flex;align-items:center;gap:10px;min-height:42px;margin-top:12px;padding:0 18px;border-radius:999px;background:var(--blush);border:1px solid #f3cfcb;font-size:14px;font-weight:700;color:var(--brand-deep);transition:background var(--fast),color var(--fast),border-color var(--fast)}
.jr-ask-go:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.jr-ask-go .icon{width:17px;height:17px;transition:transform var(--fast)}
.jr-ask-go:hover .icon{transform:translateX(-3px)}


.jr-social{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;padding-block:14px}
.jr-social p{font-size:14.5px;font-weight:700}
.jr-social ul{display:flex;flex-wrap:wrap;gap:6px}
.jr-social a,.jr-social span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--ink-2);transition:color var(--fast),border-color var(--fast),background var(--fast)}
.jr-social .icon{width:19px;height:19px}
.jr-social a:hover{background:#fff;border-color:currentColor}
.jr-social .is-instagram:hover{color:#c13584}
.jr-social .is-telegram:hover{color:#1c8fc7}
.jr-social .is-whatsapp:hover{color:#1a9e50}
.jr-social .is-youtube:hover{color:#d81f26}
.jr-social .is-linkedin:hover{color:#0a66c2}
.jr-social.is-hint{border-style:dashed}
.jr-social.is-hint ul{opacity:.45}
.jr-social.is-hint small{flex-basis:100%;font-size:13px;line-height:1.9;color:var(--muted)}

/* The text: a readable measure, headings that anchor, tables and images in their own frames */
.jr-content{max-width:none;margin-top:clamp(28px,3vw,40px);font-size:17px;line-height:2.15;color:#37312e;overflow-wrap:break-word}
.jr-content>*:first-child{margin-top:0}
.jr-content p{margin:0 0 1.3em}
.jr-content h2,.jr-content h3,.jr-content h4{color:var(--ink);text-wrap:balance}
.jr-content h2{margin:2.3em 0 .8em;font-size:clamp(22px,1.9vw,26px);font-weight:800;line-height:1.6;letter-spacing:-.5px}
.jr-content h2::before{content:'';display:block;width:30px;height:4px;margin-bottom:16px;border-radius:4px;background:var(--brand)}
.jr-content h3{margin:1.9em 0 .6em;font-size:clamp(18.5px,1.5vw,20.5px);font-weight:800;line-height:1.65}
.jr-content h4{margin:1.6em 0 .5em;font-size:17.5px;font-weight:700}
.jr-content strong,.jr-content b{font-weight:700;color:var(--ink)}
.jr-content a{color:var(--brand-deep);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:#e9aeab;transition:color var(--fast),text-decoration-color var(--fast)}
.jr-content a:hover{color:var(--brand);text-decoration-color:currentColor}
.jr-content mark{padding:0 .2em;border-radius:4px;background:#fde6b4;color:inherit}
.jr-content ul,.jr-content ol{margin:0 0 1.4em;padding:0;list-style:none}
.jr-content li{position:relative;padding-inline-start:28px}
.jr-content li+li{margin-top:.5em}
.jr-content li>ul,.jr-content li>ol{margin:.5em 0 0}
.jr-content ul>li::before{content:'';position:absolute;inset-inline-start:8px;top:.92em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.jr-content ol{counter-reset:jr-li}
.jr-content ol>li{padding-inline-start:42px;counter-increment:jr-li}
.jr-content ol>li::before{content:counter(jr-li,persian);position:absolute;inset-inline-start:0;top:.3em;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blush);color:var(--brand-deep);font-family:var(--font-num);font-size:14px;font-weight:800;line-height:1}
.jr-content blockquote,.jr-content .wp-block-quote{margin:2em 0;padding:22px 26px;border-radius:0 18px 18px 0;background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--brand);font-size:18px;font-weight:600;line-height:2;color:var(--ink)}
.jr-content blockquote p:last-child{margin-bottom:0}
.jr-content blockquote cite{display:block;margin-top:10px;font-size:14px;font-style:normal;font-weight:500;color:var(--muted)}
.jr-content .wp-block-pullquote{margin:2.2em 0;padding:28px;border-block:2px solid var(--ink);text-align:center}
.jr-content .wp-block-pullquote blockquote{margin:0;padding:0;border:0;background:none;font-size:21px}

.jr-content figure{margin:2.1em 0}
.jr-content img{display:block;height:auto;border-radius:18px}
.jr-content .wp-block-image img{width:100%;border:1px solid var(--line);background:#fff}
.jr-content .wp-block-image.is-style-rounded img{border-radius:999px}
.jr-content .wp-block-image.aligncenter,.jr-content .wp-block-image .aligncenter{margin-inline:auto;text-align:center}
.jr-content .wp-block-image.size-medium img,.jr-content .wp-block-image.is-resized img{width:auto;max-width:100%;margin-inline:auto}
.jr-content figcaption,.jr-content .wp-element-caption{margin-top:12px;font-size:13.5px;line-height:1.9;color:var(--soft);text-align:center}
.jr-content .wp-block-image figcaption::before{content:'';display:inline-block;width:14px;height:2px;margin-inline-end:8px;vertical-align:middle;border-radius:2px;background:var(--brand)}
.jr-content .wp-block-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.jr-content .wp-block-gallery.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.jr-content .wp-block-gallery figure{margin:0}
.jr-content .wp-block-gallery img{width:100%;height:100%;object-fit:cover}
.jr-content .wp-block-media-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;margin:2em 0}
.jr-content .alignleft,.jr-content .alignright{max-width:48%}
.jr-content .alignleft{float:left;margin:.4em 0 1em 1.6em}
.jr-content .alignright{float:right;margin:.4em 1.6em 1em 0}

.jr-content .wp-block-table,.jr-content .jr-table-scroll{margin:2.1em 0;overflow-x:auto;border-radius:18px;border:1px solid var(--line);background:#fff;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#cdbfb0 transparent}
.jr-content table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.9}
.jr-content th,.jr-content td{padding:13px 18px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.jr-content th+th,.jr-content td+td{border-inline-start:1px solid #f0e8dd}
.jr-content thead th{background:var(--cream);font-size:14.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.jr-content tbody tr:nth-child(even) td{background:#fdfbf8}
.jr-content tbody td:first-child{font-weight:700;color:var(--ink)}
.jr-content tbody tr:last-child td{border-bottom:0}
.jr-content .wp-block-table figcaption{margin:0;padding:10px 16px;border-top:1px solid var(--line);background:var(--paper)}
.jr-content .wp-block-table table{border:0}
.jr-content .wp-block-table thead{border:0}
.jr-content .wp-block-table th,.jr-content .wp-block-table td{border:0;border-bottom:1px solid var(--line)}
.jr-content .wp-block-table th+th,.jr-content .wp-block-table td+td{border-inline-start:1px solid #f0e8dd}
.jr-content .wp-block-table tbody tr:last-child td{border-bottom:0}

.jr-content code{padding:.12em .45em;border-radius:6px;background:var(--cream);font-family:"Talkino English",ui-monospace,monospace;font-size:.88em;direction:ltr;unicode-bidi:isolate}
.jr-content pre{margin:2em 0;padding:18px 20px;border-radius:16px;background:var(--night);color:#f5efe6;overflow-x:auto;direction:ltr;text-align:left;font-size:14px;line-height:1.8}
.jr-content pre code{padding:0;background:none;color:inherit}
.jr-content kbd{display:inline-grid;place-items:center;min-width:26px;padding:0 7px;border-radius:7px;border:1px solid var(--line);border-bottom-width:3px;background:#fff;font-family:var(--font-num);font-size:.86em;line-height:1.7}
.jr-content hr{height:auto;margin:2.6em 0;border:0;text-align:center;line-height:1}
.jr-content hr::before{content:'•   •   •';white-space:pre;color:#cdbfb0;font-size:20px;letter-spacing:.2em}
.jr-content .wp-block-embed{margin:2em 0}
.jr-content .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--night)}
.jr-content iframe{display:block;width:100%;max-width:100%;border:0}
.jr-content .wp-block-embed__wrapper iframe{position:absolute;inset:0;height:100%}
.jr-content .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:1.6em 0}
.jr-content .wp-block-button__link{display:inline-flex;align-items:center;min-height:50px;padding:10px 22px;border-radius:14px;background:var(--brand);color:#fff;font-size:15px;font-weight:700;text-decoration:none;transition:background var(--fast)}
.jr-content .wp-block-button__link:hover{background:var(--brand-hover);color:#fff}
.jr-content .is-style-outline .wp-block-button__link{background:#fff;color:var(--ink);border:1px solid var(--line)}

/* Questions and answers: the core details block */
.jr-content details{margin:.7em 0;padding:0 20px;border-radius:16px;background:#fff;border:1px solid var(--line);transition:border-color var(--fast)}
.jr-content details[open]{border-color:#d8cbb9}
.jr-content summary{position:relative;display:flex;align-items:center;min-height:58px;padding-inline-end:40px;font-size:16px;font-weight:700;line-height:1.8;color:var(--ink);cursor:pointer;list-style:none}
.jr-content summary::-webkit-details-marker{display:none}
.jr-content summary::after{content:'';position:absolute;inset-inline-end:0;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--blush) no-repeat center/12px 12px;background-image:linear-gradient(var(--brand),var(--brand)),linear-gradient(var(--brand),var(--brand));background-size:12px 2px,2px 12px;transition:transform var(--fast)}
.jr-content details[open] summary::after{background-size:12px 2px,2px 0}
.jr-content details>*:not(summary){margin-bottom:16px;font-size:15.5px;color:var(--muted)}
.jr-content .wp-block-details+.wp-block-details{margin-top:10px}

/* «جملهٔ مثال»: the sentence, with its translation one tap away */
.jr-content details.is-style-tk-example{padding:0 18px;background:var(--paper);border-style:dashed}
.jr-content .is-style-tk-example summary{direction:ltr;justify-content:flex-start;padding-inline:0 0;padding-right:92px;font-family:"Talkino English",Rokh,sans-serif;font-size:17px;font-weight:700;text-align:left}
.jr-content .is-style-tk-example summary::after{content:'ترجمه';inset-inline-end:auto;right:0;width:auto;height:30px;margin-top:-15px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-family:var(--font);font-size:13px;font-weight:700;line-height:28px;color:var(--brand-deep);direction:rtl}
.jr-content .is-style-tk-example[open] summary::after{content:'پنهان';background:var(--ink);border-color:var(--ink);color:#fff}
.jr-content .is-style-tk-example>*:not(summary){color:var(--ink-2);font-size:16px}

/* «نکته» and «هشدار» boxes */
.jr-content .is-style-tk-tip,.jr-content .is-style-tk-warn{position:relative;margin:2em 0;padding:18px 22px 4px;border-radius:18px;font-size:16px;line-height:2.05}
.jr-content .is-style-tk-tip{background:var(--blush);border:1px solid #f6d3d1}
.jr-content .is-style-tk-warn{background:#fff6e6;border:1px solid #f1dbb0}
.jr-content .is-style-tk-tip::before,.jr-content .is-style-tk-warn::before{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:2px 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:800;line-height:1.9}
.jr-content .is-style-tk-tip::before{content:'نکته';color:var(--brand-deep)}
.jr-content .is-style-tk-warn::before{content:'مهم';color:#8a5a00}
.jr-content .is-style-tk-tip p,.jr-content .is-style-tk-warn p{margin-bottom:.9em}

.jr-article{padding-bottom:clamp(56px,6vw,88px)}

/* Related articles: a native scroll-snap slider; the next card always peeks in, on every width */
.jr-more{padding-block:clamp(48px,5vw,76px);background:var(--cream);border-top:1px solid var(--line)}
.jr-more .container{max-width:1120px}
.jr-more-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.jr-more h2{font-size:clamp(22px,2.1vw,29px);font-weight:800;letter-spacing:-.6px}
.jr-more-nav{display:flex;gap:8px}
.jr-more-nav[hidden]{display:none}
.jr-more-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);transition:border-color var(--fast),opacity var(--fast),background var(--fast)}
.jr-more-btn:hover:not(:disabled){border-color:var(--ink)}
.jr-more-btn:disabled{opacity:.4;cursor:default}
.jr-more-btn .icon{width:19px;height:19px}
.jr-more-btn .icon.is-prev{transform:scaleX(-1)}
.jr-more-track{--per:2.45;--gap:20px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:6px 14px;margin-block:-6px -14px}
.jr-more-track::-webkit-scrollbar{display:none}
.jr-more-track>li{scroll-snap-align:start;min-width:0}
@media (prefers-reduced-motion:no-preference){.jr-more-track{scroll-behavior:smooth}}

/* ---------- Density and breakpoints ---------- */
@media (min-width:861px){
  .jr-content{font-size:16.5px}
}
@media (max-width:1080px){
  .jr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jr-layout{grid-template-columns:minmax(0,1fr) 270px;gap:32px}
  .jr-more-track{--per:1.7}
}
@media (max-width:900px){
  .jr-hero-inner{grid-template-columns:1fr;gap:10px}
  .jr-art{width:min(360px,84%);margin-top:6px}
  .jr-cta-card{grid-template-columns:1fr;gap:6px;padding-top:12px}
  .jr-cta-art{order:-1;height:170px;width:min(380px,100%);justify-self:center}
  .jr-cta-mascot{width:180px;left:28%}
  .jr-cta-sheet{width:124px;padding:14px 13px;gap:10px}
  /* The banner stacks: cover on top, fading down into the title */
  .jr-banner{grid-template-columns:1fr;grid-template-areas:"media" "copy";min-height:0;border-radius:24px}
  .jr-banner-media{margin:0;height:clamp(170px,46vw,260px)}
  .jr-banner-media::after{background:linear-gradient(to bottom,transparent 45%,var(--banner-bg) 100%)}
  .jr-banner-art{padding:0}
  .jr-banner-copy{padding:4px 20px 24px}
  /* One column: contents before the text, the rest of the rail after it */
  .jr-layout{grid-template-columns:1fr;gap:0}
  .jr-aside{display:contents}
  .jr-toc{order:1;margin-bottom:26px}
  .jr-main{order:2}
  .jr-ask{order:3;margin-top:30px}
  .jr-social{order:5;margin-top:16px}
}
@media (max-width:640px){
  .jr-grid{grid-template-columns:1fr}
  .jr-hero h1{letter-spacing:-.8px}
  .jr-search{min-height:58px;padding-inline:18px 6px}
  .jr-search-go{width:46px;height:46px}
  .jr-tile-aa{width:50px;height:44px;font-size:19px}
  .jr-tile-bulb{width:44px;height:44px}
  .jr-tile-note{width:60px;height:46px;padding:10px 11px}
  .jr-topics{margin-top:-26px}
  .jr-topics-bar{border-radius:24px;padding:6px}
  .jr-topic{min-height:46px;font-size:14px;padding-inline:6px 14px}
  .jr-topic-icon{width:34px;height:34px}
  .jr-topics-next{display:none}
  .jr-cta-card{border-radius:24px;padding-inline:20px}
  .jr-cta-go{width:100%;justify-content:center}
  .jr-cta-art{height:190px;margin-bottom:8px}
  .jr-cta-mascot{bottom:0;width:170px;left:26%}
  .jr-card-media.is-art{aspect-ratio:2/1}
  .jr-banner .jr-art-tile{width:92px;height:92px;border-radius:28px}
  .jr-banner .jr-art-tile .icon{width:42px;height:42px}
  .jr-banner .jr-art-lines{width:100px;padding:12px}
  .jr-toc,.jr-side{padding:16px 14px}
  .jr-content{font-size:16.5px;line-height:2.1}
  .jr-content .alignleft,.jr-content .alignright{float:none;max-width:100%;margin:1.6em 0}
  .jr-content .wp-block-media-text{grid-template-columns:1fr}
  .jr-content th,.jr-content td{padding:11px 14px}
  .jr-more-track{--per:1.12;--gap:14px}
  .jr-more-nav{display:none}
}