/* ==========================================================================
   The GF Journal: event recaps and photo stories (journal.html, journal/*.html)
   Builds on styles.css tokens. Generated pages: Programs/gf-journal/build.mjs
   ========================================================================== */

/* ---------- Breadcrumbs ---------- */
.jr-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0.4rem;margin:0 0 1.1rem;padding:0;
  font-family:var(--font-kicker);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;}
.jr-crumbs li{display:flex;align-items:center;gap:0.4rem;color:var(--text-on-dark-soft);text-shadow:0 1px 4px rgba(0,0,0,0.8);}
.jr-crumbs li + li::before{content:"/";opacity:0.6;}
.jr-crumbs a{color:var(--text-on-dark);text-decoration:none;}
.jr-crumbs a:hover,.jr-crumbs a:focus-visible{color:var(--brass-bright);}

/* ---------- Post hero ---------- */
.jr-hero{position:relative;color:var(--text-on-dark);overflow:hidden;display:flex;align-items:flex-end;
  min-height:min(88vh,52rem);padding-block:8rem 3.25rem;}
.jr-hero-media{position:absolute;inset:0;}
.jr-hero-media img{width:100%;height:100%;object-fit:cover;}
.jr-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,13,11,0.72) 0%,rgba(9,13,11,0.2) 28%,rgba(9,13,11,0.35) 55%,rgba(9,13,11,0.94) 100%);}
.jr-hero-content{position:relative;z-index:1;width:100%;}
.jr-hero .eyebrow{color:var(--brass-bright);text-shadow:0 1px 4px rgba(0,0,0,0.9);}
.jr-hero h1{margin-top:0.8rem;max-width:18ch;font-size:clamp(2.3rem,1.3rem + 3.9vw,4.8rem);line-height:1.03;
  text-shadow:0 2px 3px rgba(0,0,0,0.85),0 4px 30px rgba(0,0,0,0.6);}
.jr-dek{margin-top:1.2rem;max-width:44ch;font-size:var(--step-1);line-height:1.5;color:var(--text-on-dark);
  text-shadow:0 1px 3px rgba(0,0,0,0.9),0 2px 20px rgba(0,0,0,0.6);}
.jr-byline{margin-top:1.3rem;font-family:var(--font-kicker);font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-on-dark-soft);text-shadow:0 1px 4px rgba(0,0,0,0.85);}
.jr-byline strong{color:var(--brass-bright);font-weight:600;}

/* ---------- At a glance ---------- */
.jr-glance-wrap{background:var(--ink);color:var(--text-on-dark);border-top:1px solid var(--border-on-dark);}
.jr-glance{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;}
.jr-glance > div{padding:1.4rem 1.25rem 1.5rem;border-left:1px solid var(--border-on-dark);}
.jr-glance > div:first-child{border-left:0;padding-left:0;}
.jr-glance dt{font-family:var(--font-kicker);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--brass-bright);}
.jr-glance dd{margin:0.45rem 0 0;font-size:0.95rem;line-height:1.4;}
.jr-glance a{color:inherit;text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px;}
@media (max-width:1000px){
  .jr-glance{grid-template-columns:repeat(2,minmax(0,1fr));}
  .jr-glance > div{border-left:0;padding-left:0;border-top:1px solid var(--border-on-dark);}
  .jr-glance > div:nth-child(-n+2){border-top:0;}
  .jr-glance > div:last-child{grid-column:1 / -1;}
}

/* ---------- Sponsor band ---------- */
.jr-sponsor-band{background:var(--surface);border-bottom:1px solid var(--border);}
.jr-sponsor{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0.9rem 1.6rem;padding-block:1.4rem;}
.jr-sponsor-label{font-family:var(--font-kicker);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-soft);}
.jr-sponsor-logo{display:block;line-height:0;}
.jr-sponsor-logo img{height:clamp(2.2rem,4vw,2.9rem);width:auto;}
.jr-sponsor-also{font-size:0.92rem;color:var(--text-soft);padding-left:1.6rem;border-left:1px solid var(--border);}
.jr-sponsor-also strong{color:var(--ink);font-weight:600;}
@media (max-width:560px){ .jr-sponsor-also{padding-left:0;border-left:0;flex-basis:100%;text-align:center;} }

/* ---------- Article layout ---------- */
.jr-layout{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);padding-block:var(--space-xl) var(--space-lg);}
.jr-toc{position:sticky;top:7.5rem;align-self:start;font-size:0.9rem;}
.jr-toc-title{font-family:var(--font-kicker);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--forest);margin-bottom:0.9rem;}
.jr-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--border);counter-reset:toc;}
.jr-toc li{counter-increment:toc;}
.jr-toc ol a{display:block;padding:0.45rem 0 0.45rem 1rem;margin-left:-2px;border-left:2px solid transparent;color:var(--text-soft);text-decoration:none;line-height:1.35;}
.jr-toc ol a::before{content:counter(toc,decimal-leading-zero) " ";font-family:var(--font-kicker);font-size:0.7rem;color:var(--brass-ink);}
.jr-toc ol a:hover,.jr-toc ol a:focus-visible{color:var(--forest);border-left-color:var(--forest);}
.jr-toc-cta{margin-top:1.6rem;width:100%;justify-content:center;}
@media (max-width:1000px){
  .jr-layout{grid-template-columns:1fr;}
  .jr-toc{position:static;border:1px solid var(--border);padding:1.25rem 1.4rem;background:var(--surface);}
  .jr-toc-cta{display:none;}
}

.jr-body{min-width:0;font-size:1.075rem;line-height:1.72;}
/* Text keeps a reading measure; photo rows use the full story column */
.jr-body > p,.jr-body > h2,.jr-body > .jr-menu,.jr-body > .jr-fig:not(.jr-fig--wide){max-width:46rem;}
.jr-body > p + p{margin-top:1.1em;}
.jr-body h2{font-size:var(--step-3);line-height:1.1;margin:3.2rem 0 1.1rem;scroll-margin-top:7rem;}
.jr-body h2::before{content:"";display:block;width:2.6rem;height:2px;background:var(--brass);margin-bottom:1.1rem;}
.jr-body a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;}
.jr-body a:hover{color:var(--forest-bright);}
.jr-body sup a{text-decoration:none;font-family:var(--font-kicker);font-size:0.7em;padding-inline:0.15em;}
.jr-lede{font-family:var(--font-display);font-size:clamp(1.3rem,1.15rem + 0.6vw,1.6rem);line-height:1.5;color:var(--ink);}
.jr-lede::first-letter{float:left;font-size:3.6em;line-height:0.86;padding:0.06em 0.12em 0 0;color:var(--forest);font-weight:700;}

.jr-list{margin:1.2rem 0 1.4rem;padding:0;list-style:none;max-width:46rem;border-top:1px solid var(--border);}
.jr-list li{padding:0.7rem 0 0.7rem 1.6rem;border-bottom:1px solid var(--border);position:relative;}
.jr-list li::before{content:"";position:absolute;left:0.2rem;top:1.25rem;width:0.6rem;height:2px;background:var(--brass);}

/* ---------- Figures ---------- */
.jr-fig{margin:2rem 0;}
.jr-fig a{display:block;overflow:hidden;background:var(--paper-dim);cursor:zoom-in;}
.jr-fig img{width:100%;height:auto;display:block;transition:transform 600ms var(--ease);}
.jr-fig a:hover img{transform:scale(1.025);}
.jr-fig figcaption{margin-top:0.65rem;font-size:0.85rem;line-height:1.45;color:var(--text-soft);padding-left:0.8rem;border-left:2px solid var(--brass);}
.jr-pair,.jr-trio{display:grid;gap:0.9rem;margin:2rem 0;align-items:start;}
.jr-pair{grid-template-columns:repeat(2,minmax(0,1fr));}
.jr-trio{grid-template-columns:repeat(3,minmax(0,1fr));}
.jr-pair .jr-fig,.jr-trio .jr-fig{margin:0;}
.jr-pair .jr-fig a,.jr-trio .jr-fig a{aspect-ratio:4 / 5;}
.jr-pair .jr-fig img,.jr-trio .jr-fig img{height:100%;object-fit:cover;}
@media (max-width:640px){
  .jr-trio{grid-template-columns:1fr 1fr;}
  .jr-trio .jr-fig:first-child{grid-column:1 / -1;}
  .jr-trio .jr-fig:first-child a{aspect-ratio:4 / 3;}
}

/* ---------- Menu card ---------- */
.jr-menu{margin:2rem 0;padding:1.8rem 2rem;background:var(--ink);color:var(--text-on-dark);border-top:3px solid var(--brass);}
.jr-menu-title{font-family:var(--font-display);font-style:italic;font-size:1.8rem;color:var(--brass-bright);margin-bottom:1rem;}
.jr-menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.jr-menu-course{font-family:var(--font-kicker);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--brass);}
.jr-menu-cols p{margin-top:0.5rem;line-height:1.7;}
@media (max-width:560px){ .jr-menu-cols{grid-template-columns:1fr;} .jr-menu{padding:1.5rem;} }

/* ---------- Gallery ---------- */
.jr-gallery-section{background:var(--paper-dim);padding-block:var(--space-xl);scroll-margin-top:5rem;}
.jr-gallery-section h2{margin-top:0.8rem;font-size:var(--step-4);}
.jr-gallery-note{margin:0.8rem 0 2rem;color:var(--text-soft);}
.jr-gallery-note a{color:var(--forest);}
.jr-gallery{columns:4 220px;column-gap:0.8rem;}
.jr-gallery-item{display:block;margin-bottom:0.8rem;break-inside:avoid;overflow:hidden;cursor:zoom-in;background:var(--paper);}
.jr-gallery-item img{width:100%;height:auto;display:block;transition:transform 600ms var(--ease),opacity var(--dur-2);}
.jr-gallery-item:hover img{transform:scale(1.03);}
.jr-gallery-item:focus-visible{outline:3px solid var(--forest);outline-offset:2px;}

/* ---------- CTA ---------- */
.jr-cta{padding-block:var(--space-xl);}
.jr-cta-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.5rem;align-items:end;}
.jr-cta .eyebrow{color:var(--brass-bright);}
.jr-cta h2{margin-top:0.8rem;font-size:var(--step-4);max-width:18ch;}
.jr-cta p{margin-top:1rem;color:var(--text-on-dark-soft);max-width:52ch;}
.jr-cta .btn-row{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:flex-end;}
.jr-cta .btn-outline{color:#fff;border-color:rgba(255,255,255,0.7);}
@media (max-width:900px){ .jr-cta-grid{grid-template-columns:1fr;} .jr-cta .btn-row{justify-content:flex-start;} }

/* ---------- Sources & credit ---------- */
.jr-sources{padding-block:var(--space-lg);font-size:0.85rem;color:var(--text-soft);}
.jr-sources-title{font-family:var(--font-kicker);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--forest);}
.jr-sources ol{margin:0.8rem 0 0;padding-left:1.2rem;}
.jr-sources a{color:var(--forest);}
.jr-credit{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--border);}

/* ---------- Journal index ---------- */
.jr-index-hero .jr-crumbs{margin-bottom:0.6rem;}
.jr-index{background:var(--bg);}
.jr-index-title{font-family:var(--font-kicker);font-size:0.78rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--forest);margin-bottom:1.6rem;}
.jr-card{background:var(--surface);border:1px solid var(--border);display:grid;overflow:hidden;}
.jr-card-media{display:block;overflow:hidden;}
.jr-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 700ms var(--ease);}
.jr-card:hover .jr-card-media img{transform:scale(1.03);}
.jr-card-body{padding:clamp(1.4rem,3vw,2.5rem);display:flex;flex-direction:column;gap:0.8rem;}
.jr-card-body h2,.jr-card-body h3{line-height:1.1;}
.jr-card-body h2{font-size:var(--step-3);}
.jr-card-body h3{font-size:var(--step-2);}
.jr-card-body h2 a,.jr-card-body h3 a{color:inherit;text-decoration:none;}
.jr-card-body h2 a:hover,.jr-card-body h3 a:hover{color:var(--forest);}
.jr-card-body p{color:var(--text-soft);}
.jr-card-meta{font-family:var(--font-kicker);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;}
.jr-card .btn-ghost{align-self:flex-start;margin-top:0.4rem;font-weight:600;}
.jr-card .btn-ghost::after{content:none;}
.jr-card--feature{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);}
.jr-card--feature .jr-card-media{min-height:24rem;}
.jr-card--feature .jr-card-body{justify-content:center;}
@media (max-width:900px){ .jr-card--feature{grid-template-columns:1fr;} .jr-card--feature .jr-card-media{min-height:0;aspect-ratio:16 / 10;} }
.jr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1.4rem;margin-top:1.4rem;}
.jr-grid .jr-card-media{aspect-ratio:4 / 3;}

/* ---------- Lightbox ---------- */
.jr-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,10,9,0.95);display:flex;align-items:center;justify-content:center;padding:3.5rem 4.5rem;}
.jr-lightbox[hidden]{display:none;}
.jr-lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100%;}
.jr-lightbox img{transition:opacity var(--dur-2);max-width:100%;max-height:calc(100vh - 9rem);width:auto;height:auto;object-fit:contain;}
.jr-lightbox figcaption{margin-top:0.9rem;color:var(--text-on-dark-soft);font-size:0.9rem;text-align:center;max-width:60ch;}
.jr-lightbox button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font-size:2.4rem;line-height:1;padding:0.6rem 0.9rem;opacity:0.85;}
.jr-lightbox button:hover,.jr-lightbox button:focus-visible{opacity:1;color:var(--brass-bright);}
.jr-lb-close{top:0.6rem;right:0.8rem;font-size:1.6rem !important;}
.jr-lb-prev{left:0.5rem;top:50%;transform:translateY(-50%);}
.jr-lb-next{right:0.5rem;top:50%;transform:translateY(-50%);}
@media (max-width:640px){ .jr-lightbox{padding:3.5rem 0.5rem 2rem;} .jr-lb-prev,.jr-lb-next{top:auto;bottom:0.4rem;transform:none;} }

@media (prefers-reduced-motion:reduce){
  .jr-fig img,.jr-gallery-item img,.jr-card-media img{transition:none;}
  .jr-fig a:hover img,.jr-gallery-item:hover img,.jr-card:hover .jr-card-media img{transform:none;}
}

/* ---------- Gatherings hero collage ---------- */
.jr-index-hero{min-height:min(78vh,44rem);}
.jr-collage{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(2,1fr);gap:3px;background:var(--ink);}
.jr-collage-tile{position:relative;overflow:hidden;min-height:0;}
.jr-collage-tile picture,.jr-collage-tile img{display:block;width:100%;height:100%;}
.jr-collage-tile img{object-fit:cover;filter:saturate(0.92);}
.jr-collage .t1{grid-column:span 2;grid-row:span 2;}
.jr-collage-tile:nth-child(n+12){display:none;}
.jr-collage::after{background:
  linear-gradient(90deg,rgba(9,13,11,0.86) 0%,rgba(9,13,11,0.62) 38%,rgba(9,13,11,0.18) 75%,rgba(9,13,11,0.3) 100%),
  linear-gradient(180deg,rgba(9,13,11,0.55) 0%,rgba(9,13,11,0) 25%,rgba(9,13,11,0) 60%,rgba(9,13,11,0.9) 100%);}
@media (max-width:900px){
  .jr-collage{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);}
  .jr-collage .t1{grid-column:span 2;grid-row:span 1;}
  .jr-collage-tile:nth-child(n+12){display:none;}
}
@media (max-width:560px){
  .jr-collage{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);}
  .jr-collage .t1{grid-column:span 1;}
  .jr-collage-tile:nth-child(n+12){display:block;}
  .jr-collage::after{background:linear-gradient(180deg,rgba(9,13,11,0.6) 0%,rgba(9,13,11,0.45) 40%,rgba(9,13,11,0.92) 100%);}
}