/* Articles on yeshjr4.com: the click-to-open list (homepage section and
   /articles/) and the single-article page. Uses yeshjr4.css's tokens
   (--navy, --red, --tint, --line...). Everything here is prefixed ar-. */
.bar nav a.lnk.on{color:var(--navy)}

/* ---- the list (accordion) ---- */
.ar-list{display:grid;gap:.9rem}
.ar-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.ar-item.open{border-color:#C6D3E3;box-shadow:var(--shadow-lg)}
.ar-head{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr auto;gap:1.15rem;align-items:center;width:100%;padding:1.1rem 1.3rem;cursor:pointer;font-family:inherit;color:inherit}
.ar-head:focus-visible{outline:2.5px solid var(--navy-600);outline-offset:-3px;border-radius:var(--r)}
.ar-date{display:grid;place-items:center;width:64px;height:68px;border-radius:12px;background:var(--navy);color:#fff;line-height:1;text-align:center}
.ar-date b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.ar-date small{display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-top:.25rem;opacity:.9}
.ar-thumb{display:block;width:168px;aspect-ratio:1200/630;border-radius:10px;overflow:hidden;background:var(--tint)}
.ar-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ar-head:hover .ar-thumb img{transform:scale(1.04)}
.ar-item.has-thumb .ar-when{display:block}
.ar-when{display:none;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:.25rem}
.ar-title{display:block;font-size:clamp(1.12rem,2.3vw,1.36rem);font-weight:800;line-height:1.22;letter-spacing:-.02em;color:var(--navy)}
.ar-sub{display:block;color:var(--muted);font-size:.97rem;line-height:1.45;margin-top:.28rem}
.ar-chev{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);color:var(--navy);transition:transform .25s,background-color .2s,border-color .2s}
.ar-chev svg{width:18px;height:18px}
.ar-item.open .ar-chev{transform:rotate(180deg);background:var(--navy);border-color:var(--navy);color:#fff}
.ar-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.ar-item.open .ar-panel{grid-template-rows:1fr}
.ar-panel>div{overflow:hidden;min-height:0}
.ar-inner{padding:0 1.3rem 1.5rem}
.ar-img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:14px;margin-bottom:1.5rem;background:var(--tint)}
.ar-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.ar-more{display:flex;justify-content:center;gap:.6rem;margin-top:1.6rem}
.ar-empty{background:var(--tint);border:1px dashed var(--line);border-radius:var(--r);padding:2rem;text-align:center;color:var(--muted);font-weight:600}
@media (max-width:600px){
  .ar-head{grid-template-columns:1fr auto;gap:.8rem;padding:1rem 1.05rem}
  .ar-date{display:none}
  .ar-when{display:block}
  .ar-item.has-thumb .ar-head{grid-template-columns:auto 1fr auto}
  .ar-thumb{width:96px;border-radius:8px}
  .ar-inner{padding:0 1.05rem 1.2rem}
}

/* ---- article text ---- */
.ar-prose{font-size:1.08rem;line-height:1.75;max-width:44rem}
.ar-prose>*:first-child{margin-top:0}
.ar-prose p{margin:0 0 1.15em}
.ar-prose h2{font-size:1.5rem;margin:1.6em 0 .5em}
.ar-prose h3{font-size:1.22rem;margin:1.4em 0 .45em}
.ar-prose h4{font-size:1.06rem;margin:1.3em 0 .4em;color:var(--navy)}
.ar-prose a{color:var(--red);font-weight:600}
.ar-prose ul,.ar-prose ol{padding-left:1.4em;margin:0 0 1.15em}
.ar-prose li{margin:.3em 0}
.ar-prose blockquote{margin:1.4em 0;padding:.3em 0 .3em 1.1em;border-left:4px solid var(--red);color:var(--navy);font-family:"Libre Baskerville",Georgia,serif;font-size:1.1rem}
.ar-prose figure{margin:1.6em 0}
.ar-prose img{width:100%;border-radius:12px}
.ar-prose figcaption{font-size:.86rem;color:var(--muted);margin-top:.5em;text-align:center}

/* ---- pages ---- */
.ar-hero{background:radial-gradient(70rem 30rem at 90% -20%, rgba(0,62,130,.10), transparent 60%),radial-gradient(50rem 26rem at -8% 20%, rgba(200,0,0,.05), transparent 62%),var(--tint);border-bottom:1px solid var(--line);padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(2rem,4vw,2.8rem)}
.ar-narrow{width:min(820px,100% - 2.5rem);margin-inline:auto}
.ar-back{display:block;width:fit-content;margin-bottom:1.1rem;font-weight:700;font-size:.92rem;text-decoration:none;color:var(--muted)}
.ar-back:hover{color:var(--navy)}
.ar-hero h1{font-size:clamp(2rem,5vw,3.05rem);line-height:1.1;text-wrap:balance;max-width:none}
.ar-hero .lede{max-width:40rem}
.ar-feature{margin:2rem 0 2.2rem}
.ar-feature img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow-lg)}
.ar-share{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:2.4rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.ar-share b{color:var(--navy);margin-right:.3rem}
.ar-sbtn{font:inherit;font-weight:700;font-size:.9rem;padding:.48rem .95rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;cursor:pointer}
.ar-sbtn:hover{border-color:var(--navy)}
.ar-cta{margin-top:3.4rem}
.ar-cta .wrap{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.ar-cta h2{font-size:clamp(1.5rem,3vw,2rem)}
.ar-cta p{margin:.35rem 0 0;color:var(--muted)}
.ar-cta .row{display:flex;flex-wrap:wrap;gap:.6rem}
.ar-section{padding:clamp(2.4rem,5vw,3.6rem) 0}
.ar-preview{background:var(--red-050);color:var(--red-700);font-weight:700;text-align:center;padding:.65rem 1rem;font-size:.92rem}
@media (prefers-reduced-motion:reduce){.ar-panel,.ar-chev,.ar-thumb img{transition:none}}
.ar-more[hidden],[data-articles][hidden]{display:none}
#articles{border-bottom:1px solid var(--line)}
#articles{border-top:1px solid var(--line)}