/* ===== The OGC Journal — loaded after styles.css, reuses its tokens =====
   Product photos are square (1:1), so every image frame on these pages is square. */

/* header on journal pages: a link back to the shop instead of the cart */
.j-shop-btn{color:var(--ink)}
.nav a[aria-current="page"]::after{width:100%}

/* shared bits */
.j-crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.6rem}
.j-crumbs a{border-bottom:1px solid transparent;transition:.2s}
.j-crumbs a:hover{color:var(--burgundy);border-color:currentColor}
.j-kicker{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--burgundy);font-weight:500}
.j-deck{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.4rem);color:var(--muted);line-height:1.45}
.j-meta{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.j-meta span{margin:0 .4rem;color:var(--gold)}

/* ---------- journal home ---------- */
.j-index-head{max-width:760px;text-align:center;padding:3.5rem 0 2.5rem}
.j-index-head .j-crumbs{justify-content:center}
.j-index-head h1{font-size:clamp(2.6rem,5.5vw,4.2rem);font-weight:400;color:var(--green-deep);line-height:1.05;margin-bottom:1rem}
.j-index-head h1 em{color:#9c7a45}
.j-index-head .j-deck{max-width:560px;margin:0 auto}

/* lead story: square photo + text column that fills the same height */
.j-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:1rem 0 4.5rem;border-bottom:1px solid var(--line)}
/* the photo sizes itself from its column width only, so it can never grow into the text */
.j-lead-img{display:block;width:100%;aspect-ratio:1/1;align-self:start;overflow:hidden;border-radius:var(--radius);background:var(--cream)}
.j-lead-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.j-lead-img:hover img{transform:scale(1.03)}
.j-lead-text{min-width:0;max-width:520px}
.j-lead-text h2{font-size:clamp(2rem,3.2vw,2.9rem);font-weight:400;color:var(--green-deep);line-height:1.1;margin:.9rem 0 1rem}
.j-lead-text h2 a{transition:color .2s}
.j-lead-text h2 a:hover{color:var(--burgundy)}
.j-lead-text .j-meta{margin-top:1.4rem}
.j-lead-btn{margin-top:1.8rem}

/* more articles */
.j-more{padding:4rem 0 5.5rem}
.j-more-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:2rem}
.j-more-head h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:400;color:var(--green-deep)}
.j-count{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- cards (square photos) ---------- */
.j-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem 1.8rem}
.j-card-link{display:flex;flex-direction:column;height:100%}
.j-card-img{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);background:var(--cream)}
.j-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.j-card-link:hover .j-card-img img{transform:scale(1.04)}
.j-card-body{padding:1.1rem .1rem 0;display:flex;flex-direction:column;flex:1}
.j-card h3{font-size:1.35rem;font-weight:500;color:var(--green-deep);line-height:1.22;margin-top:.55rem;transition:color .2s}
.j-card-link:hover h3{color:var(--burgundy)}
.j-card-meta{margin-top:auto;padding-top:.9rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.j-card-meta span{display:inline-block;margin-left:.3rem;transition:transform .2s}
.j-card-link:hover .j-card-meta span{transform:translateX(4px)}
.j-section-head{margin-bottom:2.2rem}
.j-section-head h2{color:var(--green-deep);font-weight:400}
.j-section-head h2 em{color:#9c7a45}
.j-all{display:inline-block;margin-top:2.6rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--burgundy);border-bottom:1px solid currentColor;padding-bottom:.2rem}

/* ---------- article page ---------- */
.j-hero-band{background:var(--cream);border-bottom:1px solid var(--line);margin-bottom:3.5rem}
.j-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:center;padding:3rem 0}
.j-hero-text h1{font-size:clamp(2.2rem,4.2vw,3.5rem);font-weight:400;color:var(--green-deep);line-height:1.08;margin:.9rem 0 1.1rem}
.j-hero-text .j-deck{max-width:520px}
.j-hero-text .j-meta{margin-top:1.6rem}
.j-hero-img{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--paper)}
.j-hero-img img{width:100%;height:100%;object-fit:cover}

.j-body{width:min(680px,100% - 32px);margin:0 auto 4rem;font-size:1.08rem;line-height:1.8;font-weight:300}
.j-body > * + *{margin-top:1.15rem}
.j-body h2{font-size:clamp(1.7rem,3vw,2.2rem);color:var(--green-deep);margin-top:3rem;margin-bottom:-.2rem}
.j-body h3{font-size:1.45rem;color:var(--green-deep);margin-top:2.2rem}
.j-body em{color:inherit}
.j-body strong{font-weight:500}
.j-body a{color:var(--burgundy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.j-body a:hover{color:var(--burgundy-deep)}
.j-body ul,.j-body ol{padding-left:1.3rem}
.j-body li + li{margin-top:.45rem}
.j-body li::marker{color:var(--gold)}
.j-body hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.j-body > p:first-child{font-size:1.2rem;line-height:1.7}

/* special paragraphs */
.j-body .pull{font-family:var(--serif);font-size:1.6rem;line-height:1.3;color:var(--green-deep);border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.4rem;margin:2rem 0}
.j-body .pull strong{font-weight:500}
.j-body .lead-in{margin-top:1.8rem;margin-bottom:-.6rem;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--burgundy)}
.j-body .pick{margin-top:2rem;margin-bottom:-.6rem;font-family:var(--serif);font-size:1.4rem;color:var(--green-deep);display:flex;align-items:center;gap:.7rem}
.j-body .pick::before{content:"✦";font-size:.75rem;color:var(--gold)}
.j-body .cta-line{margin-top:2.2rem;padding:1.3rem 1.5rem;background:var(--cream);border-radius:var(--radius)}
.j-body .cta-line a{color:var(--green-deep)}
.j-body p:has(> em:only-child){font-size:.88rem;color:var(--muted)}

.j-tags{list-style:none;padding:0!important;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:3rem!important;padding-top:2rem!important;border-top:1px solid var(--line)}
.j-tags li{margin:0!important;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;color:var(--muted)}

.j-related{padding:5rem 0}

/* call to action panel */
.j-cta{background:var(--burgundy-deep);color:#fff;padding:4rem 0}
.j-cta .eyebrow.light{color:var(--gold-soft)}
.j-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.j-cta h2{font-weight:400;color:#fff}
.j-cta-sub{margin-top:.8rem;color:rgba(255,255,255,.7);font-size:.9rem;letter-spacing:.04em}
.j-cta-btns{display:flex;gap:.8rem;flex-wrap:wrap}

/* homepage section */
.j-home{padding:5rem 0;background:var(--cream)}
.j-home .j-all{margin-top:2.2rem}

/* footer: logo | links | contact, all vertically centered */
.footer-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:2rem}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;max-width:560px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.footer-nav a{color:var(--gold-soft);transition:.2s}
.footer-nav a:hover{color:#fff}
.footer-inner > .footer-links{justify-self:end}

@media (max-width:1024px){
  /* not enough room for three columns: stack logo, links and contact, centered */
  .footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.6rem}
  .footer-inner > .footer-links{justify-self:center;text-align:center;align-items:center}
  .footer .social{justify-content:center}
  .footer .copyright{text-align:center}
}
@media (max-width:880px){
  .j-lead{grid-template-columns:1fr;gap:1.8rem;padding-bottom:3.5rem}
  .j-hero{grid-template-columns:1fr;gap:2rem;padding:2.2rem 0 2.6rem}
  .j-hero-img{order:2}
  .j-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1.2rem}
  .j-cta-inner{flex-direction:column;align-items:flex-start}
  .j-shop-btn span{display:none}
  .nav a{align-self:flex-start}
}
@media (max-width:600px){
  .j-index-head{padding:2.2rem 0 1.8rem}
  .j-grid{grid-template-columns:1fr}
  .j-card h3{font-size:1.45rem}
  .j-hero-band{margin-bottom:2.4rem}
  .j-body{font-size:1.02rem}
  .j-body > p:first-child{font-size:1.1rem}
  .j-body .pull{font-size:1.35rem}
  .j-cta-btns{width:100%}
  .j-cta-btns .btn{flex:1 1 100%}
  .j-home,.j-related{padding:3.5rem 0}
  .j-more{padding:3rem 0 4rem}
}