/* r8: Andrew's "The Shelf" promo (Concept 1 v2, handoff 2026-11-02) and Shelf-style display cards a / c / d.
   All rules are scoped (.hj-shelf, .hj-ad, .hj-lesson-layout, .hj-midcard) so nothing leaks into the site.
   Logo: Holy_Journey_Luminous_Gold_Stacked (Drive 1mUOVjspA9Cskkn4OgStW_sjb6HyOx57-), 1200w straight downscale. */
.hj-shelf,.hj-ad{--hj-navy-2:#13224a;--hj-gold:#c6a15b;--hj-gold-light:#dfc17b;--hj-serif:"Cormorant Garamond",Georgia,serif;--hj-sans:"Inter",system-ui,sans-serif;--hj-brushed:linear-gradient(110deg,#cba95d 0%,#e8d699 48%,#d0b36b 100%)}
.hj-shelf,.hj-ad,.hj-shelf *,.hj-ad *{box-sizing:border-box}

/* ---- The Shelf (full width, under the For Individuals hero) ---- */
.hj-shelf{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 90% at 78% 55%,#1f426d 0%,#13224a 48%,#0b1530 100%);color:#fff;padding:clamp(3rem,6vw,5.5rem) 0;font-family:var(--hj-sans)}
.hj-shelf::before,.hj-shelf::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--hj-brushed)}
.hj-shelf::before{top:0}.hj-shelf::after{bottom:0}
.hj-shelf .hj-shell{width:min(1240px,100% - 48px);margin:0 auto}
.hj-shelf .hj-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.hj-shelf .hj-logo{width:170px;max-width:none;height:auto;display:block;margin:0 0 1.2rem -10px}
.hj-shelf .hj-eyebrow{margin:0;color:var(--hj-gold-light);font:600 13px/1.25 var(--hj-sans);letter-spacing:.18em;text-transform:uppercase}
#main .hj-shelf h2{font-family:var(--hj-serif);font-weight:600;color:#fff;font-size:clamp(28px,calc(28px + (100vw - 390px) * 8 / 634),36px);line-height:1;margin:.9rem 0 0;letter-spacing:-.01em;max-width:none;text-wrap:wrap}
.hj-shelf .hj-price{display:flex;align-items:baseline;gap:.9rem;margin:1.4rem 0 0}
.hj-shelf .hj-price strong{font:600 clamp(3.2rem,2rem + 3vw,5rem)/1 var(--hj-serif);background:var(--hj-brushed);-webkit-background-clip:text;background-clip:text;color:transparent}
.hj-shelf .hj-price span{color:#aebaca;font-size:.85rem;letter-spacing:.02em}
.hj-shelf .hj-bonus{position:relative;margin:1.5rem 0 0;padding:1.1rem 1.3rem 1.15rem;border:1px solid rgba(223,193,123,.42);border-left:3px solid var(--hj-gold);background:linear-gradient(100deg,rgba(198,161,91,.13),rgba(198,161,91,.03) 70%);border-radius:3px;max-width:34rem}
.hj-shelf .hj-bonus-kicker{margin:0;font:700 .7rem/1.2 var(--hj-sans);letter-spacing:.2em;text-transform:uppercase;background:var(--hj-brushed);-webkit-background-clip:text;background-clip:text;color:transparent}
.hj-shelf .hj-bonus-line{margin:.45rem 0 0;font:600 1.32rem/1.25 var(--hj-serif);color:#fff}
.hj-shelf .hj-bonus-line .hj-was{display:block;margin-top:.2rem;font:400 .82rem/1.3 var(--hj-sans);color:#aebaca;letter-spacing:.01em;text-decoration:none}
.hj-shelf .hj-bonus-list{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.42rem}
.hj-shelf .hj-bonus-list li{position:relative;padding-left:1.45rem;color:#dbe3ed;font-size:.93rem;line-height:1.4;margin:0}
.hj-shelf .hj-bonus-list li::before{content:"";position:absolute;left:.15rem;top:.28em;width:.38rem;height:.72rem;border:solid var(--hj-gold-light);border-width:0 2px 2px 0;transform:rotate(45deg);background:none}
.hj-shelf .hj-sub{margin:1.3rem 0 0;color:#dbe3ed;font-size:1.06rem;line-height:1.6;max-width:42ch}
.hj-shelf .hj-button{display:inline-flex;min-height:52px;padding:.8rem 1.25rem;align-items:center;justify-content:space-between;gap:1.2rem;border:1px solid #d0b36b;font:700 .74rem/1 var(--hj-sans);letter-spacing:.11em;text-decoration:none;text-transform:uppercase;border-radius:2px;background:var(--hj-brushed);color:var(--hj-navy-2);box-shadow:0 8px 24px rgba(8,17,39,.16);margin-top:2rem;min-width:240px}
.hj-shelf .hj-button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hj-shelf .hj-art{position:relative;margin:0}
.hj-shelf .hj-art img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 30px 60px rgba(3,8,20,.45);outline:1px solid rgba(223,193,123,.45);outline-offset:10px}
.hj-shelf .hj-numerals{display:grid;grid-template-columns:repeat(7,1fr);margin-top:28px;text-align:center;font:600 1.15rem/1 var(--hj-serif);color:var(--hj-gold-light);letter-spacing:.06em}
.hj-shelf .hj-numerals span{border-top:1px solid rgba(223,193,123,.35);padding-top:10px}
@media (max-width:820px){
 .hj-shelf .hj-grid{grid-template-columns:minmax(0,1fr)}
 .hj-shelf .hj-art{order:-1}
 .hj-shelf .hj-logo{width:124px;margin:0 0 1rem -7px}
 .hj-shelf .hj-button{width:100%}
 .hj-shelf .hj-bonus{padding:1rem 1.05rem}
 .hj-shelf .hj-bonus-line{font-size:1.2rem}
 .hj-shelf .hj-numerals{font-size:.95rem;margin-top:22px}
 .hj-shelf .hj-art img{outline-offset:6px}
}

/* ---- Display cards (from sidebar/sb.css + per-size rules) ---- */
.hj-ad{position:relative;overflow:hidden;color:#fff;background:radial-gradient(ellipse 110% 80% at 60% 45%,#1f426d 0%,#13224a 55%,#0b1530 100%);font:400 16px/1.6 var(--hj-sans);-webkit-font-smoothing:antialiased;flex:none}
.hj-ad::before,.hj-ad::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--hj-brushed);z-index:2}.hj-ad::before{top:0}.hj-ad::after{bottom:0}
.hj-ad p{margin:0}
.hj-ad .hj-logo{display:block;height:auto;max-width:none}
.hj-ad .hj-eyebrow{margin:0;color:var(--hj-gold-light);font:600 10px/1.2 var(--hj-sans);letter-spacing:.18em;text-transform:uppercase}
.hj-ad .hj-title{font-family:var(--hj-serif);font-weight:600;color:#fff;margin:0;line-height:1}
.hj-ad .hj-price{margin:0;font-family:var(--hj-serif);font-weight:600;line-height:1;background:var(--hj-brushed);-webkit-background-clip:text;background-clip:text;color:transparent}
.hj-ad .hj-fine{margin:0;color:#aebaca;font:500 10px/1.3 var(--hj-sans)}
.hj-ad .hj-bonus{border:1px solid rgba(223,193,123,.42);border-left:3px solid #c6a15b;background:linear-gradient(100deg,rgba(198,161,91,.16),rgba(198,161,91,.04) 75%);border-radius:2px;color:#e8edf4;font:500 11px/1.35 var(--hj-sans)}
.hj-ad .hj-bonus b{display:block;font:700 9px/1.2 var(--hj-sans);letter-spacing:.18em;text-transform:uppercase;background:var(--hj-brushed);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:3px}
.hj-ad .hj-bonus span{color:#aebaca;white-space:nowrap}
.hj-ad .hj-btn{display:flex;justify-content:center;gap:10px;align-items:center;background:var(--hj-brushed);color:#13224a;font:700 12px/1 var(--hj-sans);letter-spacing:.12em;text-transform:uppercase;border-radius:2px;box-shadow:0 6px 16px rgba(3,8,20,.35);text-decoration:none}
.hj-ad .hj-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hj-ad .hj-photo{display:block;border-radius:3px;box-shadow:0 14px 30px rgba(3,8,20,.5);outline:1px solid rgba(223,193,123,.5);outline-offset:4px;height:auto}
.hj-ad .hj-num{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font:600 11px/1 var(--hj-serif);color:var(--hj-gold-light)}
.hj-ad .hj-num span{border-top:1px solid rgba(223,193,123,.35);padding-top:5px}
/* a: 300x600 half-page */
.hj-ad-a{width:300px;height:600px;padding:26px 22px 22px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hj-ad-a .hj-logo{width:104px;margin:0 auto}.hj-ad-a .hj-eyebrow{margin-top:12px}.hj-ad-a .hj-title{font-size:36px;margin-top:8px}
.hj-ad-a .hj-photo{width:256px;margin-top:20px}.hj-ad-a .hj-num{width:256px;margin-top:12px}
.hj-ad-a .hj-pr{margin-top:16px;display:flex;align-items:baseline;gap:8px}.hj-ad-a .hj-price{font-size:46px}
.hj-ad-a .hj-bonus{margin-top:14px;padding:9px 11px;text-align:left;width:256px}.hj-ad-a .hj-btn{margin-top:auto;width:256px;height:42px}
/* c: 300x250 medium rectangle */
.hj-ad-c{width:300px;height:250px;padding:18px 18px 16px}
.hj-ad-c .hj-logo{position:absolute;right:14px;top:12px;width:66px}.hj-ad-c .hj-eyebrow{font-size:9.5px}.hj-ad-c .hj-title{font-size:27px;margin-top:7px;width:200px}
.hj-ad-c .hj-pr{display:flex;align-items:baseline;gap:8px;margin-top:8px}.hj-ad-c .hj-price{font-size:36px}
.hj-ad-c .hj-bonus{margin-top:9px;padding:6px 9px;font-size:10.5px}.hj-ad-c .hj-bonus b{display:inline;margin:0 4px 0 0}
.hj-ad-c .hj-btn{position:absolute;left:18px;right:18px;bottom:16px;height:34px;font-size:11px}
/* d: 320x480 in-content card */
.hj-ad-d{width:320px;height:480px}
.hj-ad-d .hj-top{position:relative;height:160px;overflow:hidden}.hj-ad-d .hj-top img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block;max-width:none}.hj-ad-d .hj-top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,21,48,0) 55%,#13224a 100%)}
.hj-ad-d .hj-logo{position:absolute;left:16px;top:132px;width:76px;z-index:3}
.hj-ad-d .hj-body{position:absolute;left:22px;right:22px;top:206px}.hj-ad-d .hj-eyebrow{font-size:9.5px}.hj-ad-d .hj-title{font-size:30px;margin-top:6px}
.hj-ad-d .hj-pr{display:flex;align-items:baseline;gap:8px;margin-top:9px}.hj-ad-d .hj-price{font-size:38px}
.hj-ad-d .hj-bonus{margin-top:10px;padding:7px 10px}.hj-ad-d .hj-btn{position:absolute;left:22px;right:22px;bottom:20px;height:40px}

/* ---- Placement: card d mid-page (For Individuals, Books & Membership) ---- */
.hj-midcard{padding:clamp(2.5rem,5vw,4rem) 0;background:#fffdf8;display:flex;justify-content:center}
.hj-midcard .hj-ad{margin:0 auto}

/* ---- Placement: card a in a right sidebar on the sample-lesson page ---- */
.hj-lesson-layout > .hj-aside{display:flex;justify-content:center;padding:8px 0 48px}
@media (min-width:1200px){
 .hj-lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;width:min(1240px,calc(100% - 48px));margin:0 auto;align-items:start}
 .hj-lesson-layout > .board-lesson-wrap,.hj-lesson-layout > .board-lesson-wrap:has(.lx){width:100%;margin:0;min-width:0}
 .hj-lesson-layout > .hj-aside{padding:16px 0 20px;align-self:stretch;display:block}
}
@media (min-width:1200px) and (min-height:760px){
 .hj-lesson-layout > .hj-aside .hj-ad{position:sticky;top:calc(var(--lesson-sticky-top,74px) + 16px)}
}

/* ---- /banner-review/ (hidden review route) ---- */
body:has(> .hj-review){margin:0}
.hj-review{padding:32px 0 64px;background:#fffdf8;font-family:"Inter",system-ui,sans-serif;color:#17213a}
.hj-review .hj-review-shell{width:min(1240px,100% - 48px);margin:0 auto}
.hj-review h1{font:600 2rem/1.1 "Cormorant Garamond",Georgia,serif;margin:0 0 .5rem;color:#13224a}
.hj-review h2{font:600 11px/1.3 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#626979;margin:40px 0 12px}
.hj-review .hj-review-row{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}

/* banners-1: Andrew's image banners (2x WebP/PNG). Rails 300x600; strips 970x250, responsive (scale to the column, e.g. ~94% in the 912px lesson column). */
.hj-banner{display:block;line-height:0;margin:0 auto;max-width:100%;border-radius:4px;box-shadow:0 18px 40px rgba(3,8,20,.18)}
.hj-banner:focus-visible{outline:2px solid #c6a15b;outline-offset:4px}
.hj-banner picture,.hj-banner img{display:block;width:100%;height:auto;border-radius:4px}
.hj-banner-rail{width:300px}
.hj-banner-strip{width:970px}
.hj-banner-wrap{padding:clamp(2rem,4vw,3.5rem) 0;background:#fffdf8}
.hj-banner-wrap .hj-banner-shell{width:min(1240px,100% - 48px);margin:0 auto;display:flex;justify-content:center}
@media (min-width:1200px) and (min-height:760px){.hj-lesson-layout > .hj-aside .hj-banner{position:sticky;top:calc(var(--lesson-sticky-top,74px) + 16px)}}
/* ph-1 (r8g3): phones (same breakpoint as HJ_STRIP_PHONE_MQ in site.js). The 970x250 strips would render ~342px wide or less there.
   A strip with Andrew's phone art (class hj-banner-has-phone) shows it at 342x88 CSS (684x176 @2x), allowed to run a little past the
   24px shell gutter on 375px screens but never wider than the screen less 16px. A strip without phone art is hidden (and fetches nothing).
   Rails stay: they render at their native 300x600 on phones. */
/* r8g3b bp-1 (Kevin): breakpoint raised 400px -> 440px so 412/430px phones get the phone art too */
@media (max-width: 440px){
 .hj-banner-wrap-strip,.hj-banner-strip:not(.hj-banner-has-phone){display:none}
 .hj-banner-strip.hj-banner-has-phone{width:342px;max-width:calc(100vw - 16px);flex:none}
}