/* NAAL Insights page - reproduces Insights.html reference */
/* Reference Wrap is content-box: 1240 of CONTENT + 2x32 padding = 1304. */
.in-wrap{max-width:1304px;margin:0 auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
/* Shared <Eyebrow>: gold-600 #9C7734 and 0.14em tracking (the 0.1em tracking
   belongs to the inline-styled category spans, not to Eyebrow). */
/* Reference <Eyebrow> is an inline-flex with a 12px gap, so it sits in a 24.8px
   line box; as a plain block it measured 18.6 and left the newsletter band
   6.2px short. */
.in-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--naal-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9C7734;margin:0}
.in-eyebrow.dark{color:#DBC28C}
/* Featured */
.in-feat{padding-bottom:96px}
.in-feat-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
.in-feat-img{display:block;border-radius:24px;aspect-ratio:16/10;background:#0E3B36;overflow:hidden}
/* Reference .zoomer: 900ms and scale(1.05), not .6s / 1.04. */
.in-feat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms cubic-bezier(0.2,0,0,1)}
.in-feat-img:hover img{transform:scale(1.05)}
.in-feat-meta{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.in-feat-cat{font-family:var(--naal-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#9C7734}
/* --text-muted is #7A7973 and --text-secondary #5A5954; #8a8a85 / #5c5c57 were
   eyeballed approximations. */
.in-feat-date{font-size:13px;color:#7A7973}
.in-feat h2{font-family:var(--naal-serif);font-weight:500;font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.015em;margin:0 0 16px}
.in-feat p{font-size:18px;line-height:1.6;color:#5A5954;margin:0 0 26px}
/* Reference .arrow-link: weight 500, 320ms cubic-bezier(.2,0,0,1), 5px shift. */
.in-arrow{display:inline-flex;align-items:center;gap:8px;color:#0E3B36;font-weight:500;text-decoration:none}
.in-arrow svg{transition:transform 320ms cubic-bezier(0.2,0,0,1)}
.in-arrow:hover svg{transform:translateX(5px)}
/* List */
.in-list-wrap{padding-bottom:112px}
.in-list{border-top:1px solid #D9D9D6}
/* The reference row has no hover background - the rgba(22,22,22,.02) tint was
   invented, and its inline color:inherit is what stops the global a:hover gold. */
.in-row{display:grid;grid-template-columns:160px 1fr auto;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid #D9D9D6;text-decoration:none;color:inherit}
.in-row .in-cat{font-family:var(--naal-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#9C7734}
.in-row .in-title{font-family:var(--naal-serif);font-weight:500;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.01em;color:#161616}
.in-row .in-meta{font-size:14px;color:#7A7973;white-space:nowrap}
/* Newsletter */
.in-news-wrap{padding-bottom:128px}
.in-news{background:#161616;border-radius:32px;padding:64px 56px;color:#fff}
.in-news-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.in-news h2{font-family:var(--naal-serif);font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.015em;margin:16px 0 0}
.in-news form{display:flex;gap:12px;flex-wrap:wrap}
/* The reference input is CONTENT-BOX (the design system has no global border-box
   reset), so min-width:220 is 220 of content and the element measures
   220+32+1.6 = 253.6 - which is what sets the newsletter grid's 1fr track below
   860. Under Elementor's global border-box it measured 220 and the whole band
   narrowed. line-height:normal likewise restores the 18.4px content box (48px
   tall input) against the theme's input line-height. */
.in-news input{box-sizing:content-box;line-height:normal;flex:1;min-width:220px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 16px;font-size:15px;color:#fff;font-family:var(--naal-sans);outline:none}
.in-news input::placeholder{color:rgba(255,255,255,.5)}
/* Reference Button size=lg onDark: 16px/500, 15px 28px, line-height 1, 1px
   transparent border, border-box, 140ms --motion-hover. */
.in-sub{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;box-sizing:border-box;background:#B99146;color:#161616;font-family:var(--naal-sans);font-weight:500;font-size:16px;line-height:1;padding:15px 28px;border:1px solid transparent;border-radius:999px;cursor:pointer;transition:background-color 140ms cubic-bezier(0.2,0,0,1),color 140ms cubic-bezier(0.2,0,0,1)}
.in-sub:hover{background:#DBC28C}
.in-sub:active{transform:translateY(0.5px)}
/* Reference site.css only rewrites grid-template-columns at 860 - it never
   touches gaps, and .in-row is not a .grid2 so it keeps 160px 1fr auto and its
   nowrap meta at every width. The gap:28px, the row collapse and the
   white-space:normal were all invented. */
@media (max-width:860px){.in-feat-grid,.in-news-grid{grid-template-columns:1fr}}

/* ---------- Insights hero ---------- */
#about-hero h1{display:inline-block;max-width:940px;margin-left:auto;margin-right:auto;font-family:var(--naal-serif)}
#about-hero .elementor-widget-text-editor p{max-width:620px;margin-left:auto;margin-right:auto;margin-bottom:0}
#about-hero .naal-eyebrow .elementor-heading-title{font-family:var(--naal-mono)}

/* Pagination. Not present in the reference - this is a NAAL addition, built
   from the existing tokens: mono eyebrow type, gold-600 #9C7734, carbon
   #161616, secondary #5A5954, muted #7A7973, border #D9D9D6, and the
   140ms/320ms cubic-bezier(.2,0,0,1) motion the rest of the page uses.
   It lives inside .in-list-wrap, directly after .in-list, so it belongs to the
   article list rather than forming a section of its own.
   Rules are scoped under .in-pager because .elementor-kit-5 a{color:#0E3B36}
   is (0,1,1) and beats any single-class anchor rule. */
.in-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:48px}
.in-pager .in-pager-nums{display:flex;align-items:center;gap:8px}
.in-pager .in-pager-num{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;box-sizing:border-box;border:1px solid #D9D9D6;border-radius:999px;font-family:var(--naal-mono);font-size:12px;letter-spacing:.1em;color:#5A5954;text-decoration:none;transition:color 140ms cubic-bezier(.2,0,0,1),border-color 140ms cubic-bezier(.2,0,0,1)}
.in-pager .in-pager-num:hover{color:#9C7734;border-color:#9C7734}
.in-pager .in-pager-num.is-current{background:#161616;border-color:#161616;color:#fff}
.in-pager .in-pager-gap{font-family:var(--naal-mono);font-size:12px;letter-spacing:.1em;color:#7A7973}
.in-pager .in-pager-edge{display:inline-flex;align-items:center;gap:8px;font-family:var(--naal-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#161616;text-decoration:none;transition:color 140ms cubic-bezier(.2,0,0,1)}
.in-pager .in-pager-edge:hover{color:#9C7734}
.in-pager .in-pager-edge svg{transition:transform 320ms cubic-bezier(.2,0,0,1)}
.in-pager .in-pager-prev svg{transform:rotate(180deg)}
.in-pager .in-pager-next:hover svg{transform:translateX(5px)}
.in-pager .in-pager-prev:hover svg{transform:rotate(180deg) translateX(5px)}
.in-pager .in-pager-edge.is-disabled{color:#D9D9D6;pointer-events:none}