/* ============================================================
   HOUSE OF PAPAVER — Journal (index + article page)
   Editorial layer on top of site.css + shop.css. Reuses the
   .frame botanical art, .shop-grid product cards, tokens and
   fonts. Light-only, same frozen skin.
   ============================================================ */

/* ---- shared: read-more link ---- */
.jr-read{display:inline-flex;align-items:center;gap:.5em;font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);transition:.3s var(--ease)}
.jr-read .arw{transition:transform .3s var(--ease)}
.jr-read:hover{color:var(--accent-2)}
.jr-read:hover .arw{transform:translateX(4px)}

/* ---- frame aspect overrides for editorial use ---- */
.frame--card{aspect-ratio:4/3}
.frame--card .frame__art{height:60%;bottom:12%}
.frame--hero{aspect-ratio:16/9;border-radius:4px}
.frame--hero .frame__art{height:82%;bottom:8%}
@media (max-width:560px){ .frame--hero{aspect-ratio:4/3} }

/* ============ Journal index ============ */
.jr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.8rem);margin:clamp(2rem,5vh,3.4rem) 0 clamp(3rem,7vh,5rem)}
.jr-card{display:flex;flex-direction:column}
.jr-card__fig{margin-bottom:1.2rem}
.jr-card__cat{font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:.7em;align-items:center;margin-bottom:.55rem}
.jr-card__cat::before{content:"";width:1.7em;height:1px;background:var(--accent);flex:0 0 auto}
.jr-card h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin:0 0 .5rem;text-wrap:balance}
.jr-card h2 a{color:inherit}
.jr-card h2 a:hover{color:var(--accent)}
.jr-card p{font-size:.95rem;color:var(--ink-2);line-height:1.55;margin:0 0 1.1rem;max-width:42ch}
.jr-card .jr-read{margin-top:auto}

@media (max-width:820px){ .jr-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .jr-grid{grid-template-columns:1fr;gap:2.4rem} }

/* ============ Article page ============ */
.article-wrap{padding-bottom:clamp(3rem,7vh,5rem)}
.article-head{max-width:var(--readw);margin-inline:auto;text-align:center;padding-top:clamp(1.4rem,4vh,2.6rem)}
.article-eyebrow{font:500 .7rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;gap:.7em;align-items:center;justify-content:center}
.article-title{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:1rem 0 0;text-wrap:balance}
.article-dek{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.35;color:var(--ink-2);margin:1.1rem auto 0;max-width:52ch;text-wrap:balance}
.article-byline{margin-top:1.5rem;font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.article-hero{margin:clamp(2rem,5vw,3.4rem) 0}

.article-body{max-width:var(--readw);margin-inline:auto}
.article-body > * + *{margin-top:1.3rem}
.article-body p{font-size:1.09rem;line-height:1.72;color:var(--ink)}
.article-body h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.12;color:var(--ink);letter-spacing:-.01em;margin-top:2.6rem;text-wrap:balance}
.article-body h2 + p{margin-top:.7rem}
.pullquote{margin:2.4rem 0;padding-left:1.5rem;border-left:2px solid var(--accent);font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.7vw,1.9rem);line-height:1.3;color:var(--ink);text-wrap:balance}

/* inline "shop the story" — full content width, reuses .shop-grid + .product */
.shop-story{margin:2.8rem 0}
.shop-story__h{font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding-top:1.6rem;border-top:1px solid var(--line);margin-bottom:1.4rem}
.shop-story .shop-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));max-width:840px;margin-inline:auto}

.article-foot{max-width:var(--readw);margin:clamp(2.5rem,6vh,4rem) auto 0;padding-top:1.8rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.article-foot .jr-read .arw{transform:rotate(180deg)}
.article-foot .jr-read:hover .arw{transform:rotate(180deg) translateX(4px)}

/* closing full-width related grid (reuses shop-grid) */
.jr-more{margin-top:clamp(3rem,7vh,5rem)}