/* LPJH JH Insights — assets/css/insights.css
   Enqueue AFTER brand-tokens.css, homepage.css and location.css: reuses .hp bands,
   .loc-hero, .loc-crumb and .loc-prose. Tokens only.

   The subject rail offsets against --lpjh-hd-sticky-h from header.css — do not
   hardcode a pixel value there.
*/
/* ============================================================
   LPJH — JH Insights (index + single post)
   After homepage.css + location.css. Reuses .hp bands, .loc-hero, .loc-prose.
   Prefix: .ins-
   ============================================================ */

/* ---------- INDEX MASTHEAD (type-only, charcoal) ----------
   No hero photograph: the index is a library, and demanding a hero image for it
   would mean commissioning a picture that means nothing. Charcoal also solves the
   transparent white header. */
.ins-mast{background:var(--tr-charcoal);padding:11rem 0 4.5rem;border-bottom:1px solid rgba(255,255,255,.14)}
.ins-mast__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:end}
.ins-mast__h1{margin:0;font-family:var(--tr-font-display);font-size:4.4rem;font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--tr-cream)}
.ins-mast__line{margin:1.35rem 0 0;font-family:var(--tr-font-display);font-size:1.35rem;font-style:italic;font-weight:500;line-height:1.45;color:rgba(250,250,248,.78);max-width:30em;text-wrap:pretty}
.ins-mast__aside{padding-left:2.5rem;border-left:1px solid rgba(255,255,255,.14)}
.ins-mast__aside p{margin:0;font-family:var(--tr-font-body);font-size:.9rem;line-height:1.8;color:rgba(250,250,248,.6);text-wrap:pretty}

/* ---------- CATEGORY RAIL ---------- */
/* Sits BELOW the charcoal sticky bar, not under it. */
.ins-rail{position:sticky;top:var(--lpjh-hd-sticky-h);z-index:39;background:var(--tr-cream);border-bottom:1px solid var(--tr-border)}
.ins-rail__list{display:flex;align-items:stretch;gap:0;margin:0 0 0 -1.1rem;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.ins-rail__list::-webkit-scrollbar{display:none}
.ins-rail__btn{display:block;padding:1.05rem 1.6rem;background:none;border:0;border-left:1px solid var(--tr-border);cursor:pointer;white-space:nowrap;font-family:var(--tr-font-body);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-stone-500);transition:background-color .26s ease,color .26s ease}
.ins-rail__list li:first-child .ins-rail__btn{padding-left:1.1rem;border-left:0}
.ins-rail__btn:hover{color:var(--tr-accent)}
.ins-rail__btn.is-active{background:var(--tr-linen);color:var(--tr-accent)}

/* ---------- FEATURED ---------- */
.ins-feat{display:grid;grid-template-columns:1.15fr 1fr;gap:4rem;align-items:center}
.ins-feat__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tr-linen)}
.ins-feat__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.ins-feat:hover .ins-feat__media img{transform:scale(1.03)}
.ins-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin:0 0 1.1rem;font-family:var(--tr-font-body);font-size:.62rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tr-accent)}
.ins-meta span:not(.ins-meta__sep){color:var(--tr-accent)}
.ins-meta__sep{color:var(--tr-border)}
.ins-meta__mute{color:var(--tr-stone-400)!important}
.ins-feat__h{margin:0;font-family:var(--tr-font-display);font-size:3rem;font-weight:500;line-height:1.06;letter-spacing:-.02em;color:var(--tr-heading);text-wrap:balance}
.ins-feat__h a{color:inherit;text-decoration:none;transition:color .26s ease}
.ins-feat__h a:hover{color:var(--tr-accent)}
.ins-feat__sf{margin:1.35rem 0 0;font-family:var(--tr-font-body);font-size:1.02rem;line-height:1.8;color:var(--tr-text-muted);max-width:36em;text-wrap:pretty}
.ins-feat__more{margin-top:1.9rem}

/* ---------- CATEGORY SECTIONS ---------- */
.ins-group{padding:3.75rem 0;border-top:1px solid var(--tr-border)}
.ins-group:first-of-type{padding-top:0;border-top:0}
.ins-group__head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.ins-group__name{margin:0;font-family:var(--tr-font-display);font-size:2.1rem;font-weight:500;line-height:1.1;letter-spacing:-.015em;color:var(--tr-heading)}
.ins-group__blurb{margin:.4rem 0 0;font-family:var(--tr-font-display);font-size:1.1rem;font-style:italic;line-height:1.45;color:var(--tr-text-muted)}
.ins-group__n{flex:0 0 auto;font-family:var(--tr-font-body);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-stone-400)}
.ins-list{border-top:1px solid var(--tr-border)}
.ins-row{display:grid;grid-template-columns:9rem 1fr auto;gap:2.5rem;align-items:start;padding:1.6rem .25rem;border-bottom:1px solid var(--tr-border);text-decoration:none;transition:padding-left .4s cubic-bezier(.19,1,.22,1)}
.ins-row:hover{padding-left:1.25rem}
.ins-row__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tr-linen)}
.ins-row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ins-row__h{margin:0 0 .45rem;font-family:var(--tr-font-display);font-size:1.6rem;font-weight:500;line-height:1.16;letter-spacing:-.01em;color:var(--tr-heading);transition:color .26s ease;text-wrap:pretty}
.ins-row:hover .ins-row__h{color:var(--tr-accent)}
.ins-row__x{margin:0;font-family:var(--tr-font-body);font-size:.88rem;line-height:1.7;color:var(--tr-text-muted);max-width:44em;text-wrap:pretty}
.ins-row__t{margin:.6rem 0 0;font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-stone-400)}
.ins-row__arrow{flex:0 0 auto;align-self:center;width:1.5rem;height:1px;background:var(--tr-border);transition:width .4s cubic-bezier(.19,1,.22,1),background-color .26s ease}
.ins-row:hover .ins-row__arrow{width:2.5rem;background:var(--tr-accent)}

/* ---------- NEWSLETTER ---------- */
.ins-news{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.ins-news__h{margin:0;font-family:var(--tr-font-display);font-size:2.3rem;font-weight:500;line-height:1.1;letter-spacing:-.015em;color:var(--tr-cream)}
.ins-news__p{margin:.9rem 0 0;font-family:var(--tr-font-body);font-size:.95rem;line-height:1.75;color:rgba(250,250,248,.66);max-width:40em;text-wrap:pretty}
.ins-form{display:flex;flex-wrap:wrap;gap:1.25rem}
.ins-form__f{flex:1 1 100%;display:flex;flex-direction:column;gap:.4rem}
.ins-form__f[data-half]{flex:1 1 calc(50% - .625rem)}
.ins-form__f label{font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,250,248,.5)}
.ins-form__f input{width:100%;padding:.8rem 0;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.24);border-radius:0;font-family:var(--tr-font-body);font-size:.95rem;color:var(--tr-cream);transition:border-color .26s ease}
.ins-form__f input:focus{outline:none;border-bottom-color:var(--tr-gold-pale)}
.ins-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;width:100%}
.ins-form__fine{font-family:var(--tr-font-body);font-size:.7rem;line-height:1.6;color:rgba(250,250,248,.45);max-width:24em}
.ins-sent{padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.14)}
.ins-sent h3{margin:0 0 .4rem;font-family:var(--tr-font-display);font-size:1.6rem;font-weight:500;color:var(--tr-cream)}
.ins-sent p{margin:0;font-family:var(--tr-font-body);font-size:.9rem;line-height:1.7;color:rgba(250,250,248,.6)}

/* ---------- SINGLE POST ----------
   The post header is CHARCOAL, not cream, for two reasons: the site header is
   transparent white over its first band, so a cream header leaves the navigation
   invisible; and it matches the index masthead, giving the whole Insights section
   one identity. The article body below is cream — dark type on light for reading. */
.ins-post__head{padding:10.5rem 0 3rem;background:var(--tr-charcoal)}
.ins-post__head .loc-crumb{color:rgba(255,255,255,.55)}
.ins-post__head .loc-crumb a{color:rgba(255,255,255,.55)}
.ins-post__head .loc-crumb a:hover{color:var(--tr-gold-pale)}
.ins-post__head .ins-meta span:not(.ins-meta__sep){color:var(--tr-gold-pale)}
.ins-post__head .ins-meta__sep{color:rgba(255,255,255,.24)}
.ins-post__head .ins-meta__mute{color:rgba(250,250,248,.5)!important}
.ins-post__h1{margin:0;max-width:26em;font-family:var(--tr-font-display);font-size:3.6rem;font-weight:500;line-height:1.04;letter-spacing:-.02em;color:var(--tr-cream);text-wrap:balance}
.ins-post__sf{margin:1.5rem 0 0;max-width:34em;font-family:var(--tr-font-display);font-size:1.4rem;font-style:italic;font-weight:500;line-height:1.5;color:rgba(250,250,248,.76);text-wrap:pretty}
.ins-byline{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin:2.25rem 0 0;padding-top:1.35rem;border-top:1px solid rgba(255,255,255,.14);font-family:var(--tr-font-body);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,250,248,.5)}
.ins-byline b{font-weight:600;color:var(--tr-cream)}
.ins-post__media{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--tr-linen)}
.ins-post__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ins-body{display:grid;grid-template-columns:14rem 1fr;gap:4rem;align-items:start}
/* Sticky-TOC enabler. Cassio wraps the page in .page-wrapper > .page-wrapper__content,
   both overflow:hidden — each a non-scrolling scroll container that kills the TOC's
   position:sticky. overflow:clip clips identically but is NOT a scroll container, so
   sticky resolves against the viewport. Scoped to body.lpjh-inspost (single posts run
   native scroll — see header.php). Mirrors the Join Our Portfolio fix. */
body.lpjh-inspost .page-wrapper,
body.lpjh-inspost .page-wrapper__content{overflow:clip}
.ins-toc{position:sticky;top:6.5rem;align-self:start}
.ins-toc__h{margin:0 0 1rem;font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-stone-400)}
.ins-toc__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--tr-border)}
.ins-toc__list a{display:block;padding:.7rem 0;border-bottom:1px solid var(--tr-border);font-family:var(--tr-font-body);font-size:.8rem;line-height:1.45;color:var(--tr-text-muted);text-decoration:none;transition:color .26s ease}
.ins-toc__list a:hover,.ins-toc__list a.is-active{color:var(--tr-accent)}
/* Prose runs the full width of its column (no max-width) — per request. */
.ins-prose p{margin:0 0 1.5rem;font-family:var(--tr-font-body);font-size:1.05rem;line-height:1.85;color:var(--tr-text);text-wrap:pretty}
.ins-prose>p:first-child{font-size:1.2rem;line-height:1.7}
.ins-prose h2{margin:2.75rem 0 1.1rem;font-family:var(--tr-font-display);font-size:1.9rem;font-weight:500;line-height:1.15;letter-spacing:-.015em;color:var(--tr-heading);scroll-margin-top:7rem}
.ins-prose a{color:var(--tr-accent)}
.ins-prose blockquote{margin:2.25rem 0;padding-left:1.5rem;border-left:1px solid var(--tr-accent)}
.ins-prose blockquote p{font-family:var(--tr-font-display);font-size:1.3rem;font-style:italic;line-height:1.5;color:var(--tr-heading)}

/* Inline residence recommendation */
.ins-stay{margin:2.75rem 0;padding:1.75rem 0;border-top:1px solid var(--tr-border);border-bottom:1px solid var(--tr-border);display:grid;grid-template-columns:8rem 1fr;gap:1.75rem;align-items:center}
.ins-stay__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--tr-linen)}
.ins-stay__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ins-stay__l{margin:0 0 .35rem;font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tr-accent)}
.ins-stay__n{margin:0 0 .3rem;font-family:var(--tr-font-display);font-size:1.4rem;font-weight:500;letter-spacing:-.01em;color:var(--tr-heading)}
.ins-stay__n a{color:inherit;text-decoration:none;transition:color .26s ease}
.ins-stay__n a:hover{color:var(--tr-accent)}
.ins-stay__p{margin:0;font-family:var(--tr-font-body);font-size:.85rem;line-height:1.6;color:var(--tr-text-muted)}

/* Share */
.ins-share{display:flex;align-items:center;gap:1.1rem;margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--tr-border)}
.ins-share__l{font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tr-stone-400)}
.ins-share a{display:grid;place-items:center;width:2.1rem;height:2.1rem;border:1px solid var(--tr-border);color:var(--tr-stone-500);font-size:.82rem;text-decoration:none;transition:border-color .26s ease,color .26s ease,background-color .26s ease}
.ins-share a:hover{border-color:var(--tr-accent);background:var(--tr-accent);color:var(--tr-on-accent)}

/* Author card */
.ins-author{display:grid;grid-template-columns:5.5rem 1fr;gap:1.75rem;align-items:start;padding:2rem 0;border-top:1px solid var(--tr-border);border-bottom:1px solid var(--tr-border);margin-top:3rem}
.ins-author__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--tr-linen)}
.ins-author__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ins-author__n{margin:0 0 .2rem;font-family:var(--tr-font-display);font-size:1.35rem;font-weight:500;letter-spacing:-.01em;color:var(--tr-heading)}
.ins-author__r{margin:0 0 .7rem;font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-accent)}
.ins-author__b{margin:0;font-family:var(--tr-font-body);font-size:.88rem;line-height:1.75;color:var(--tr-text-muted);text-wrap:pretty}

/* Related */
.ins-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--tr-border)}
.ins-rel__card{padding:1.6rem 2rem 0 0;border-left:1px solid var(--tr-border);text-decoration:none}
.ins-rel>.ins-rel__card:first-child{padding-left:0;border-left:0}
.ins-rel>.ins-rel__card:not(:first-child){padding-left:2rem}
.ins-rel__h{margin:.6rem 0 .4rem;font-family:var(--tr-font-display);font-size:1.35rem;font-weight:500;line-height:1.18;letter-spacing:-.01em;color:var(--tr-heading);transition:color .26s ease;text-wrap:pretty}
.ins-rel__card:hover .ins-rel__h{color:var(--tr-accent)}
.ins-rel__x{margin:0;font-family:var(--tr-font-body);font-size:.82rem;line-height:1.65;color:var(--tr-text-muted)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .ins-mast{padding:9rem 0 3.5rem}
  .ins-mast__grid{grid-template-columns:1fr;gap:2rem;align-items:start}
  .ins-mast__aside{padding-left:0;padding-top:1.75rem;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .ins-mast__h1{font-size:3.2rem}
  .ins-feat,.ins-news{grid-template-columns:1fr;gap:2.5rem}
  .ins-feat__h{font-size:2.4rem}
  .ins-row{grid-template-columns:7rem 1fr;gap:1.75rem}
  .ins-row__arrow{display:none}
  .ins-body{grid-template-columns:1fr;gap:2.5rem}
  .ins-toc{position:static;top:auto;padding-bottom:.5rem}
  .ins-prose{max-width:none}
  .ins-post__h1{font-size:2.8rem}
  .ins-rel{grid-template-columns:1fr}
  .ins-rel__card,.ins-rel>.ins-rel__card:not(:first-child){padding:1.4rem 0 0;border-left:0;border-top:1px solid var(--tr-border)}
  .ins-rel>.ins-rel__card:first-child{border-top:0;padding-top:0}
}
@media (max-width:899px){
  .ins-mast{padding:7.5rem 0 2.5rem}
  .ins-mast__h1{font-size:2.5rem}
  .ins-mast__line{font-size:1.1rem}
  .ins-rail__btn{padding:.85rem 1.1rem;font-size:.6rem}
  .ins-feat__h{font-size:1.9rem}
  .ins-group{padding:2.5rem 0}
  .ins-group__name{font-size:1.6rem}
  .ins-group__blurb{font-size:1rem}
  .ins-group__head{flex-direction:column;gap:.5rem}
  .ins-group__n{display:none}
  .ins-row{grid-template-columns:1fr;gap:1rem;padding:1.35rem .25rem}
  .ins-row__media{aspect-ratio:16/9}
  .ins-row__h{font-size:1.35rem}
  .ins-post__head{padding:8rem 0 2rem}
  .ins-post__h1{font-size:2.1rem}
  .ins-post__sf{font-size:1.15rem}
  .ins-post__media{aspect-ratio:16/9}
  .ins-prose p{font-size:1rem}
  .ins-prose>p:first-child{font-size:1.1rem}
  .ins-prose h2{font-size:1.5rem}
  .ins-stay{grid-template-columns:1fr;gap:1.1rem}
  .ins-stay__media{aspect-ratio:16/9}
  .ins-author{grid-template-columns:1fr;gap:1.1rem}
  .ins-author__media{width:5rem}
  .ins-news__h{font-size:1.7rem}
  .ins-form__f[data-half]{flex:1 1 100%}
}

/* ---------- the_content() OUTPUT ----------
   Production body copy comes from the editor, so cover the elements WordPress
   actually emits. The prototype only rendered <p> and <h2>. */
.ins-prose h3{margin:2.25rem 0 .8rem;font-family:var(--tr-font-display);font-size:1.45rem;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--tr-heading)}
.ins-prose ul,.ins-prose ol{margin:0 0 1.5rem;padding-left:1.35rem}
.ins-prose li{margin-bottom:.55rem;font-family:var(--tr-font-body);font-size:1.05rem;line-height:1.8;color:var(--tr-text)}
.ins-prose figure{margin:2.25rem 0}
.ins-prose img{max-width:100%;height:auto;display:block}
.ins-prose figcaption{margin-top:.7rem;font-family:var(--tr-font-body);font-size:.78rem;line-height:1.6;color:var(--tr-stone-400)}
.ins-prose strong{font-weight:600;color:var(--tr-heading)}
.ins-prose hr{margin:2.5rem 0;border:0;border-top:1px solid var(--tr-border)}
.ins-prose .wp-block-pullquote,.ins-prose .wp-block-quote{margin:2.25rem 0;padding-left:1.5rem;border-left:1px solid var(--tr-accent)}
.ins-prose .wp-block-quote p{font-family:var(--tr-font-display);font-size:1.3rem;font-style:italic;line-height:1.5;color:var(--tr-heading)}
.ins-prose .wp-block-quote cite{display:block;margin-top:.7rem;font-family:var(--tr-font-body);font-size:.72rem;font-style:normal;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tr-stone-400)}
.ins-author__avatar{width:100%;height:auto;display:block}

/* ---------- PAGINATION (category archive) ---------- */
.ins-list+.navigation{margin-top:2.5rem}
.navigation .nav-links{display:flex;flex-wrap:wrap;gap:.5rem}
.navigation .page-numbers{display:grid;place-items:center;min-width:2.6rem;height:2.6rem;padding:0 .6rem;border:1px solid var(--tr-border);font-family:var(--tr-font-body);font-size:.72rem;font-weight:600;letter-spacing:.08em;color:var(--tr-heading);text-decoration:none;transition:border-color .26s ease,background-color .26s ease,color .26s ease}
.navigation .page-numbers:hover{border-color:var(--tr-accent);color:var(--tr-accent)}
.navigation .page-numbers.current{background:var(--tr-accent);border-color:var(--tr-accent);color:var(--tr-on-accent)}