/* Community Journal: overview, article and comments. Builds on styles.css + faq.css (light page, dark hero band),
   using only the site's own tokens: navy, champagne, ivory, Montserrat and Lora. */

/* ---------- Dark band: the menu row and the hero share it, like the other sub-pages ---------- */
.j-navwrap, .j-hero, .j-art-head{background:var(--navy-950); color:var(--ivory); --ink:var(--ivory); --muted:var(--slate); --accent:var(--champ); --focus:var(--champ-hi)}
.j-navwrap{padding:clamp(112px,15vh,150px) var(--gutter) 0}
.j-navwrap .s-nav{max-width:1240px; margin:0 auto}
.j-hero{position:relative; overflow:hidden; padding:clamp(40px,6vh,72px) var(--gutter) clamp(120px,16vh,170px)}
.j-hero::before{content:""; position:absolute; inset:auto -10% -55% 35%; height:120%; background:radial-gradient(closest-side, rgba(216,182,128,.22), rgba(216,182,128,0)); pointer-events:none}
.j-hero::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(247,244,237,.035) 0 1px, transparent 1px 120px); mask-image:linear-gradient(180deg, transparent, #000 40%, transparent); pointer-events:none}
.j-hero-in{position:relative; z-index:1; max-width:1240px; margin:0 auto}
.j-hero .crumbs ol, .j-art-head .crumbs ol, .j-hero .crumbs a, .j-art-head .crumbs a, .j-hero .crumbs li + li::before, .j-art-head .crumbs li + li::before{color:var(--slate)}
.j-hero .eyebrow{color:var(--champ)}
.j-hero h1{margin:0; font:400 clamp(2.4rem,6vw,5rem)/1.04 var(--f-sans); letter-spacing:-.02em; color:var(--ivory); max-width:16ch; text-wrap:balance}
.j-hero h1 em{font:400 italic 1.06em/1 var(--f-serif); color:var(--champ-hi); letter-spacing:0}
.j-hero .lead{color:#C9D3E1; max-width:56ch; font-size:var(--t-lg); line-height:1.6; margin:24px 0 0}

.j-wrap{max-width:calc(1240px + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); box-sizing:border-box}

/* ---------- Featured post: lifts out of the dark band ---------- */
.j-feature{margin-top:calc(clamp(120px,16vh,170px) * -1 + 24px); position:relative; z-index:2}
.j-feature-card{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); background:var(--paper); border-radius:28px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(5,13,25,.45), 0 0 0 1px rgba(10,26,47,.06)}
.j-feature-media{display:block; position:relative; min-height:100%}
.j-feature-img{height:100%; min-height:clamp(260px,34vw,460px)}
.j-feature-copy{padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; justify-content:center; gap:4px}
.j-feature-copy h2{margin:6px 0 14px; font:500 clamp(1.6rem,2.6vw,2.4rem)/1.15 var(--f-sans); letter-spacing:-.01em; text-wrap:balance}
.j-feature-copy h2 a{color:var(--navy); text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size var(--dur) var(--ease-out)}
.j-feature-copy h2 a:hover{background-size:100% 1px}
.j-feature-copy .btn{align-self:flex-start; margin-top:22px}

/* ---------- Images: covers keep their proportions, gently zoom on hover ---------- */
.j-feature-img, .j-card-img, .j-art-cover{overflow:hidden; background:var(--navy)}
.j-feature-img img, .j-card-img img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out)}
.j-feature-card:hover .j-feature-img img, .j-card:hover .j-card-img img{transform:scale(1.035)}
.j-cover-blank{position:relative; background:radial-gradient(120% 90% at 20% 10%, #1B3558 0%, var(--navy-950) 70%)}
.j-cover-blank .j-mark{position:absolute; inset:0; background:url("assets/avendox-mark-300.webp") center/38% auto no-repeat; opacity:.55}

/* ---------- Grid of posts ---------- */
.j-list{margin-top:clamp(56px,8vw,96px)}
.j-sec-h{margin:0 0 26px; font:500 var(--t-xs)/1.2 var(--f-sans); letter-spacing:.26em; text-transform:uppercase; color:var(--bronze)}
.j-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px,2.4vw,32px)}
.j-card{height:100%; display:flex; flex-direction:column; background:var(--paper); border-radius:22px; overflow:hidden; box-shadow:0 0 0 1px rgba(10,26,47,.07); transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)}
.j-card:hover{transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(5,13,25,.45), 0 0 0 1px rgba(122,90,36,.25)}
.j-card-link{display:block}
.j-card-img{aspect-ratio:16/10}
.j-card-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:2px; flex:1}
.j-card h3{margin:4px 0 10px; font:500 1.22rem/1.3 var(--f-sans); text-wrap:balance}
.j-card h3 a{color:var(--navy); text-decoration:none}
.j-card h3 a::after{content:""; position:absolute; inset:0}
.j-card{position:relative}
.j-card .j-card-link{position:relative; z-index:0}
.j-card h3 a:focus-visible{outline:none}
.j-card:has(h3 a:focus-visible){outline:2px solid var(--navy); outline-offset:4px}
.j-excerpt{margin:0; color:var(--ink-soft); line-height:1.6}
.j-card .j-excerpt{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.j-card .j-meta{margin-top:auto; padding-top:16px}

.j-tag{display:inline-flex; align-self:flex-start; margin:0; padding:6px 11px; border-radius:999px; font:600 10px/1 var(--f-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); box-shadow:inset 0 0 0 1px rgba(122,90,36,.35)}
.j-tag-gold{color:var(--champ); box-shadow:inset 0 0 0 1px rgba(216,182,128,.45)}
.j-feature .j-tag-gold{color:var(--bronze); box-shadow:inset 0 0 0 1px rgba(122,90,36,.35)}
.j-meta{display:flex; flex-wrap:wrap; gap:6px 10px; margin:14px 0 0; font-size:var(--t-sm); color:var(--ink-soft)}

/* ---------- Empty state and follow band ---------- */
.j-empty{margin-top:calc(clamp(120px,16vh,170px) * -1 + 24px); position:relative; z-index:2; background:var(--paper); border-radius:28px; padding:clamp(36px,6vw,80px); text-align:center; box-shadow:0 40px 80px -40px rgba(5,13,25,.45), 0 0 0 1px rgba(10,26,47,.06)}
.j-empty h2{margin:22px auto 12px; font:400 italic clamp(1.7rem,3vw,2.5rem)/1.2 var(--f-serif); color:var(--navy); max-width:22ch}
.j-empty p{margin:0 auto; max-width:52ch; color:var(--ink-soft); line-height:1.6}
.j-empty .j-social{justify-content:center; margin-top:28px}
.j-empty-art{display:flex; justify-content:center; gap:10px}
.j-empty-art span{width:54px; height:70px; border-radius:12px; background:linear-gradient(100deg, rgba(10,26,47,.06) 30%, rgba(216,182,128,.35) 50%, rgba(10,26,47,.06) 70%) 0 0/300% 100%; animation:skShimmer 1.8s linear infinite}
.j-empty-art span:nth-child(2){height:84px; animation-delay:.15s}
.j-empty-art span:nth-child(3){animation-delay:.3s}
.j-follow{margin-top:clamp(56px,8vw,96px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px; padding:clamp(26px,4vw,44px); border-radius:24px; background:var(--navy-950); color:var(--ivory)}
.j-follow h2{margin:0 0 6px; font:400 italic clamp(1.4rem,2.4vw,2rem)/1.2 var(--f-serif); color:var(--ivory)}
.j-follow p{margin:0; color:#C9D3E1}
.j-social{display:flex; flex-wrap:wrap; gap:10px; margin:0}
.j-social a{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px 0 14px; border-radius:999px; text-decoration:none; font:500 var(--t-sm)/1 var(--f-sans); color:var(--navy); box-shadow:inset 0 0 0 1px rgba(10,26,47,.18); transition:background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease}
.j-social a:hover{color:var(--bronze); box-shadow:inset 0 0 0 1px var(--bronze); background:rgba(122,90,36,.07)}
.j-follow .j-social a{color:var(--ivory); box-shadow:inset 0 0 0 1px rgba(235,212,160,.35)}
.j-follow .j-social a:hover{color:var(--navy-950); background:var(--champ-hi); box-shadow:none}
.j-social svg, .j-share svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.j-social a:focus-visible, .j-share a:focus-visible, .j-share button:focus-visible, .j-reply:focus-visible, .j-back:focus-visible, .j-cancel:focus-visible{outline:2px solid var(--focus); outline-offset:3px}

/* ---------- Article ---------- */
.j-art-head{padding:clamp(40px,6vh,72px) var(--gutter) clamp(150px,20vh,220px); position:relative; overflow:hidden}
.j-art-head::before{content:""; position:absolute; inset:-40% 30% auto -20%; height:120%; background:radial-gradient(closest-side, rgba(216,182,128,.18), rgba(216,182,128,0)); pointer-events:none}
.j-art-head-in{position:relative; max-width:820px; margin:0 auto}
.j-art-head h1{margin:16px 0 0; font:400 clamp(2.1rem,4.8vw,3.9rem)/1.08 var(--f-sans); letter-spacing:-.015em; color:var(--ivory); text-wrap:balance}
.j-standfirst{margin:22px 0 0; font:400 italic clamp(1.15rem,1.7vw,1.4rem)/1.55 var(--f-serif); color:#C9D3E1; max-width:60ch}
.j-byline{display:flex; align-items:center; gap:14px; margin-top:30px}
.j-byline img{width:46px; height:46px; object-fit:contain; border-radius:50%; background:rgba(247,244,237,.06); padding:8px; box-shadow:inset 0 0 0 1px rgba(235,212,160,.3)}
.j-by{margin:0; font-weight:500; color:var(--ivory)}
.j-art-head .j-meta{margin-top:4px; color:var(--slate)}
.j-ai{display:inline-block; margin-left:8px; padding:4px 9px; border-radius:999px; vertical-align:2px; font:600 9px/1 var(--f-sans); letter-spacing:.2em; text-transform:uppercase; color:var(--navy-950); background:var(--champ-hi)}
.j-ai-note{margin:14px 0 0; font-size:var(--t-sm); color:var(--slate)}
.j-art-cover{max-width:1080px; margin:calc(clamp(150px,20vh,220px) * -1 + 40px) auto 0; border-radius:28px; position:relative; z-index:1; box-shadow:0 40px 90px -40px rgba(5,13,25,.6)}
.j-art-cover img{display:block; width:100%; height:auto; max-height:72vh; object-fit:cover}
.j-article{padding-bottom:8px}
.j-article > .j-art-cover{margin-left:max(var(--gutter), calc((100% - 1080px) / 2)); margin-right:max(var(--gutter), calc((100% - 1080px) / 2))}

.j-prose{max-width:68ch; margin:clamp(40px,6vw,72px) auto 0; padding:0 var(--gutter); font-size:clamp(1.05rem,1.2vw,1.15rem); line-height:1.8; color:var(--navy)}
.j-prose > p:first-child{font-size:1.18em; line-height:1.7}
.j-prose > p:first-child::first-letter{float:left; font:400 italic 4.1em/.82 var(--f-serif); color:var(--bronze); margin:.06em .1em 0 0}
.j-prose p{margin:0 0 1.3em}
.j-prose h2{margin:2.2em 0 .6em; font:500 clamp(1.45rem,2.2vw,1.9rem)/1.25 var(--f-sans); letter-spacing:-.01em}
.j-prose h3{margin:1.8em 0 .5em; font:400 italic clamp(1.25rem,1.8vw,1.5rem)/1.3 var(--f-serif); color:var(--bronze)}
.j-prose a{color:var(--navy); text-decoration-color:var(--bronze); text-underline-offset:3px; text-decoration-thickness:1px}
.j-prose a:hover{color:var(--bronze)}
.j-prose strong{font-weight:600}
.j-prose ul, .j-prose ol{margin:0 0 1.3em; padding-left:1.3em}
.j-prose li{margin:.35em 0}
.j-prose li::marker{color:var(--bronze)}
.j-prose blockquote{margin:2em 0; padding:.2em 0 .2em 1.4em; border-left:2px solid var(--champ)}
.j-prose blockquote p{margin:0; font:400 italic clamp(1.3rem,2vw,1.65rem)/1.45 var(--f-serif); color:var(--navy)}
.j-prose hr{border:0; height:1px; margin:2.6em auto; width:40%; background:linear-gradient(90deg, transparent, var(--champ), transparent)}
.j-prose code{font:500 .88em/1 ui-monospace, "SF Mono", Menlo, monospace; background:rgba(10,26,47,.06); padding:.15em .4em; border-radius:6px}
.j-prose pre{margin:0 0 1.4em; padding:18px 20px; border-radius:16px; background:var(--navy-950); color:var(--ivory); overflow-x:auto; font-size:.9em; line-height:1.6}
.j-prose pre code{background:none; padding:0; color:inherit}
.j-fig{margin:2.2em 0; }
.j-fig img{display:block; width:100%; height:auto; border-radius:18px}
.j-fig figcaption{margin-top:10px; font-size:var(--t-sm); color:var(--ink-soft); text-align:center}

.j-art-foot{max-width:68ch; margin:40px auto 0; padding:22px var(--gutter) 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line)}
.j-share{display:flex; align-items:center; gap:8px; font:500 var(--t-xs)/1 var(--f-sans); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.j-share span{margin-right:4px}
.j-share a, .j-share button{display:inline-flex; align-items:center; gap:8px; min-height:44px; min-width:44px; justify-content:center; padding:0 12px; border-radius:999px; border:0; background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; font:500 var(--t-sm)/1 var(--f-sans); letter-spacing:0; text-transform:none; text-decoration:none}
.j-share a:hover, .j-share button:hover{color:var(--bronze); box-shadow:inset 0 0 0 1px var(--bronze)}
.j-share button span{margin:0}
.j-back{display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--navy); font-weight:500; text-decoration:none}
.j-back .ico{transform:rotate(180deg)}
.j-back:hover{color:var(--bronze)}

/* ---------- Comments ---------- */
.j-comments{max-width:68ch; margin:clamp(56px,8vw,88px) auto 0; padding:0 var(--gutter)}
.j-comments > h2{display:flex; align-items:center; gap:12px; margin:0 0 24px; font:400 italic clamp(1.6rem,2.6vw,2.1rem)/1.2 var(--f-serif); color:var(--navy)}
.j-c-n{display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 10px; border-radius:999px; background:var(--navy); color:var(--ivory); font:600 var(--t-sm)/1 var(--f-sans)}
.j-threads, .j-replies{list-style:none; margin:0; padding:0}
.j-threads > li{padding:22px 0; border-top:1px solid var(--line)}
.j-threads > li:first-child{border-top:0; padding-top:4px}
.j-replies{margin:16px 0 0 26px; padding-left:22px; border-left:2px solid rgba(216,182,128,.45)}
.j-replies > li + li{margin-top:16px}
.j-c{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px}
.j-c-avatar{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, #1B3558, var(--navy-950)); color:var(--champ-hi); font:500 1.05rem/1 var(--f-serif)}
.j-c-owner .j-c-avatar{background:var(--navy-950); box-shadow:0 0 0 2px var(--champ)}
.j-c-avatar img{width:70%; height:auto}
.j-c-head{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 6px; color:var(--navy)}
.j-c-head time{font-size:var(--t-sm); color:var(--ink-soft)}
.j-c-badge{padding:4px 9px; border-radius:999px; background:var(--navy-950); color:var(--champ-hi); font:600 9px/1 var(--f-sans); letter-spacing:.2em; text-transform:uppercase}
.j-c-owner .j-c-main{background:rgba(216,182,128,.12); padding:14px 16px; border-radius:16px}
.j-c-body p{margin:0 0 .7em; line-height:1.65; overflow-wrap:anywhere}
.j-c-body p:last-child{margin-bottom:0}
.j-reply{display:inline-flex; align-items:center; gap:6px; min-height:36px; margin-top:6px; padding:0 12px 0 8px; border:0; border-radius:999px; background:transparent; color:var(--bronze); font:600 var(--t-xs)/1 var(--f-sans); letter-spacing:.16em; text-transform:uppercase; cursor:pointer}
.j-reply svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.j-reply:hover{background:rgba(122,90,36,.08)}
.j-c-none{margin:0 0 28px; color:var(--ink-soft)}

.j-form{margin-top:32px; padding:clamp(22px,3vw,32px); border-radius:22px; background:var(--paper); box-shadow:0 0 0 1px rgba(10,26,47,.08), 0 30px 60px -44px rgba(5,13,25,.5)}
.j-c .j-form{margin-top:16px}
.j-form h3{margin:0 0 18px; font:500 1.15rem/1.3 var(--f-sans); color:var(--navy)}
.j-replying{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:-6px 0 16px; padding:10px 14px; border-radius:12px; background:rgba(216,182,128,.14); color:var(--navy); font-size:var(--t-sm)}
.j-replying[hidden]{display:none}
.j-cancel{border:0; background:transparent; color:var(--bronze); font:600 var(--t-xs)/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; min-height:32px; padding:0 6px}
.j-field{margin-bottom:16px}
.j-field label{display:block; margin-bottom:8px; font-weight:500; color:var(--navy)}
.j-field .opt{font-weight:400; color:var(--ink-soft)}
.j-field input, .j-field textarea{width:100%; box-sizing:border-box; font:400 1rem/1.5 var(--f-sans); color:var(--navy); background:#fff; border:1px solid rgba(10,26,47,.32); border-radius:12px; padding:12px 14px; transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease}
.j-field textarea{resize:vertical; min-height:130px}
.j-field input:focus, .j-field textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(10,26,47,.14)}
.j-field [aria-invalid="true"]{border-color:#B42318}
.j-field .help{margin:6px 0 0; font-size:var(--t-sm); color:var(--ink-soft)}
.j-count{text-align:right}
.j-form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px}
.j-form .btn[disabled]{opacity:.6; cursor:progress}
.j-note{flex:1 1 260px; margin:0; font-size:var(--t-sm); color:var(--ink-soft); line-height:1.5}
.j-note a{color:inherit}
.j-status{margin:16px 0 0; font-weight:500}
.j-status:empty{display:none}
.j-status.ok{color:#05603A}
.j-status.bad{color:#B42318}

.j-more{max-width:calc(1240px + var(--gutter) * 2); margin-left:auto; margin-right:auto; padding:0 var(--gutter); box-sizing:border-box}

/* Buttons on the light part of the page: navy with ivory text (the gold button is for the dark bands) */
.j-feature-copy .btn, .j-form .btn{background:var(--navy); color:var(--ivory); border-color:var(--navy)}
.j-feature-copy .btn:hover, .j-form .btn:hover{background:var(--navy-700); border-color:var(--navy-700); box-shadow:0 10px 26px -12px rgba(5,13,25,.6)}
.j-feature-copy .btn:focus-visible, .j-form .btn:focus-visible{outline:2px solid var(--navy); outline-offset:3px}

/* ---------- Smaller screens ---------- */
@media (max-width: 1000px){
  .j-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .j-feature-card{grid-template-columns:minmax(0,1fr)}
  .j-feature-img{min-height:0; aspect-ratio:16/9; height:auto}
}
@media (max-width: 640px){
  .j-grid{grid-template-columns:minmax(0,1fr)}
  .j-replies{margin-left:10px; padding-left:14px}
  .j-c{grid-template-columns:36px minmax(0,1fr); gap:10px}
  .j-c-avatar{width:36px; height:36px}
  .j-art-cover{border-radius:18px}
  .j-feature-card, .j-empty{border-radius:22px}
  .j-share span{display:none}
}
@media (prefers-reduced-motion: reduce){
  .j-card, .j-feature-img img, .j-card-img img, .j-feature-copy h2 a, .j-social a, .j-field input, .j-field textarea{transition:none}
  .j-card:hover, .j-feature-card:hover .j-feature-img img, .j-card:hover .j-card-img img{transform:none}
  .j-empty-art span{animation:none}
}