/* insights.css — styling for the generated Insights blog.
 *
 * The rest of the site duplicates its page chrome inline in every .html file.
 * These pages are GENERATED, so duplicating the chrome into each one would mean
 * a stylesheet copy per post. It lives here once instead, and both the index and
 * the post template link it.
 *
 * Sections 1-4 are the site's shared chrome, copied verbatim from
 * contact-us/index.html so the nav, sub-header and footer match pixel for pixel.
 * Sections 5-7 are blog-specific.
 *
 * url() paths resolve relative to THIS file (repo root), not to the page that
 * links it — which is why footer-trees.jpg needs no ../ despite being used by
 * pages two levels down.
 */

/* ---------- 1. tokens ---------- */
:root {
  --forest:#143D2E; --pine:#0E2A20; --night:#091A13;
  --brass:#B0894C; --brassLt:#C9A86A; --brassDk:#916E38;
  --cream:#F5F2EA; --paper:#FBFAF5; --ink:#1A1D1A; --fog:rgba(245,242,234,0.72);
  --sand:#EAE3D2; --sage:#E3E8DD;
  --serif:"EB Garamond", Georgia, serif;
  --sans:"Archivo", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --nav-h: 78px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }

/* ---------- 2. nav ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 48px; gap: 32px;
  background-color: var(--forest); box-shadow: 0 8px 30px rgba(9,26,19,0.22); border-bottom: 1px solid rgba(245,242,234,0.10); }
.nav__logo { display: flex; align-items: center; }
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links > a, .nav__item > a { font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--cream);
  opacity: 0.86; transition: opacity .18s; position: relative; padding: 4px 0; white-space: nowrap; cursor: pointer; }
.nav__links > a:hover, .nav__item > a:hover, .nav__links a.is-current { opacity: 1; }
.nav__links > a::after, .nav__item > a::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background: var(--brassLt); transition: right .25s ease; }
.nav__links > a:hover::after, .nav__item > a:hover::after, .nav__links a.is-current::after { right: 0; }
.nav__item { position: relative; }
.nav__item > a::before { content:""; position:absolute; left:0; right:0; top:100%; height:20px; }
.nav__menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 208px; background: var(--cream); border-radius: 10px; padding: 8px; opacity: 0; visibility: hidden;
  box-shadow: 0 20px 46px rgba(9,26,19,0.32); transition: opacity .18s, transform .18s, visibility .18s; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__menu a { display: block; padding: 11px 14px; border-radius: 7px; font-size: 13.5px; color: var(--forest);
  opacity: 1; transition: background .16s, color .16s; }
.nav__menu a:hover { background: rgba(20,61,46,0.08); color: var(--brassDk); }
.nav__menu-lead { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--forest); }
.nav__menu-div { height: 1px; background: rgba(20,61,46,0.12); margin: 6px 12px; }
.nav__cta { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); border: 1.5px solid rgba(245,242,234,0.5); padding: 12px 22px; border-radius: 2px;
  white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.nav__cta:hover { background: var(--cream); color: var(--forest); border-color: var(--cream); }
.nav__menu-kicker { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brassDk); margin:2px 14px 7px; }
.nav__menu-lead { display:flex !important; align-items:center; justify-content:space-between; gap:16px; }
.nav__menu-arw { font-family:Georgia,serif; font-size:15px; color:var(--brassDk); transition:transform .18s; }
.nav__menu-lead:hover .nav__menu-arw { transform:translateX(3px); }
.nav__menu-sub { padding-left:36px !important; position:relative; }
.nav__menu-num { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:10px; font-weight:700; letter-spacing:.06em; color:#B0894C; opacity:.75; }

/* ---------- 3. sticky sub-header ---------- */
.subhead { background: var(--sand); border-bottom: 1px solid rgba(20,61,46,0.14);
  box-shadow: 0 6px 18px rgba(9,26,19,0.10); overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .38s cubic-bezier(.2,.7,.3,1), opacity .3s ease; }
.subhead.is-on { max-height: 64px; opacity: 1; }
.subhead__inner { max-width: 1240px; margin: 0 auto; padding: 9px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.subhead__label { display: flex; align-items: center; gap: 12px; min-width: 0; }
.subhead__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass);
  box-shadow: 0 0 0 3px rgba(176,137,76,0.2); flex: 0 0 auto; animation: subheadPulse 2s ease-in-out infinite; }
@keyframes subheadPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(176,137,76,0.5); } 70% { box-shadow: 0 0 0 8px rgba(176,137,76,0); } }
@media (prefers-reduced-motion: reduce) { .subhead__dot { animation: none; box-shadow: 0 0 0 3px rgba(176,137,76,0.2); } }
.subhead__k { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brassDk); }
.subhead__pg { font-family: var(--serif); font-size: 16.5px; font-weight: 500; color: var(--forest); letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subhead__cta { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brassDk); }
.subhead__cta .ar { transition: transform .2s; }
.subhead__cta:hover .ar { transform: translateX(4px); }

/* ---------- 4. page header + footer ---------- */
.phead { position: relative; overflow: hidden; background: var(--forest); color: var(--cream);
  padding: calc(var(--nav-h) + 64px) 48px 82px;
  background-image: radial-gradient(90% 120% at 84% -10%, rgba(176,137,76,0.2), rgba(176,137,76,0) 55%); }
.phead__inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.phead__crumb { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: rgba(245,242,234,0.55); margin: 0 0 22px; }
.phead__crumb a { color: rgba(245,242,234,0.7); transition: color .18s; }
.phead__crumb a:hover { color: var(--brassLt); }
.phead__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--brassLt); margin: 0 0 22px; }
.phead__eyebrow::before { content:""; width: 40px; height: 1.5px; background: var(--brassLt); }
.phead h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 5.6vw, 76px);
  line-height: 1.02; letter-spacing: -0.02em; color: var(--cream); margin: 0; max-width: 18ch; }
.phead__lead { font-size: 17.5px; line-height: 1.65; color: rgba(245,242,234,0.78); margin: 26px 0 0; max-width: 54ch; }

.footer { position: relative; background: var(--night); color: var(--cream); }
.footer__trees { height: 156px; background-image: linear-gradient(to bottom, rgba(9,26,19,0.15) 30%, var(--night) 100%), url("footer-trees.jpg");
  background-size: cover; background-position: center 32%; }
.footer__body { max-width: 1240px; margin: 0 auto; padding: 4px 48px 0; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 40px; padding: 40px 0 44px; border-bottom: 1px solid rgba(245,242,234,0.14); }
.footer__tag { margin: 22px 0 0; max-width: 36ch; font-size: 14.5px; line-height: 1.6; color: rgba(245,242,234,0.62); }
.footer__col h5 { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brassLt); margin: 4px 0 18px; }
.footer__col a, .footer__col p { display: block; font-size: 14.5px; line-height: 1.5; color: rgba(245,242,234,0.72); text-decoration: none; margin: 0 0 12px; transition: color .18s; }
.footer__col a:hover { color: var(--cream); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 0 30px; }
.footer__copy { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: rgba(245,242,234,0.5); margin: 0; }
.footer__legal { display: flex; gap: 22px; }
.footer__legal a { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: rgba(245,242,234,0.5); text-decoration: none; transition: color .18s; }
.footer__legal a:hover { color: var(--brassLt); }

/* ---------- 5. insights index ---------- */
.ins { background: var(--paper); padding: clamp(64px, 8vw, 100px) 48px clamp(80px, 10vw, 120px); }
.ins__inner { max-width: 1240px; margin: 0 auto; }
.ins__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.pcard { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(26px, 3.4vw, 52px);
  align-items: start; padding: clamp(30px, 3.6vw, 46px) 0; border-top: 1px solid rgba(20,61,46,0.14); }
.pcard:first-child { border-top: 0; padding-top: 0; }
/* A post with no heroImage would otherwise leave the 300px thumbnail column
   empty and squeeze its text into it. */
.pcard--nothumb { grid-template-columns: minmax(0, 1fr); }
.pcard__thumb { display: block; position: relative; overflow: hidden; border-radius: 12px;
  aspect-ratio: 16 / 10; background: var(--sage); border: 1px solid rgba(20,61,46,0.12); }
.pcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.pcard:hover .pcard__thumb img { transform: scale(1.045); }
.pcard__body { min-width: 0; }
.pcard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brassDk); margin: 0 0 14px; }
.pcard__meta .sep { color: rgba(20,61,46,0.3); }
.pcard__meta .by { color: rgba(26,29,26,0.5); }
.pcard__title { font-family: var(--serif); font-weight: 500; font-size: clamp(25px, 2.9vw, 36px);
  line-height: 1.14; letter-spacing: -0.015em; color: var(--forest); margin: 0; }
.pcard__title a { transition: color .18s; }
.pcard:hover .pcard__title a { color: var(--brassDk); }
.pcard__excerpt { font-size: 15.5px; line-height: 1.68; color: rgba(26,29,26,0.66); margin: 15px 0 0; max-width: 62ch; }
.pcard__more { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brassDk); }
.pcard__more .ar { transition: transform .2s; }
.pcard:hover .pcard__more .ar { transform: translateX(5px); }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
.ptag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brassDk); background: rgba(176,137,76,0.12); border: 1px solid rgba(176,137,76,0.28);
  border-radius: 999px; padding: 4px 10px; }
.ins__empty { font-family: var(--serif); font-size: 22px; color: rgba(26,29,26,0.55); margin: 0; }

/* ---------- 6. single post ---------- */
.post { background: var(--paper); padding: clamp(46px, 6vw, 72px) 48px clamp(80px, 10vw, 120px); }
.post__inner { max-width: 760px; margin: 0 auto; }
.post__hero { margin: 0 0 clamp(34px, 4vw, 54px); border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(20,61,46,0.12); background: var(--sage); }
.post__hero img { width: 100%; height: auto; display: block; }

/* Body copy. 760px + 17.5px lands at roughly 70 characters a line. */
.prose { font-size: 17.5px; line-height: 1.75; color: rgba(26,29,26,0.84); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.35em; }
.prose h2, .prose h3, .prose h4, .prose h5 {
  font-family: var(--serif); font-weight: 600; color: var(--forest);
  letter-spacing: -0.01em; line-height: 1.22; margin: 2em 0 0.6em; }
.prose h2 { font-size: clamp(27px, 3vw, 34px); }
.prose h3 { font-size: clamp(23px, 2.4vw, 28px); }
.prose h4 { font-size: clamp(20px, 2vw, 23px); }
.prose h5 { font-size: 18px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--brassDk); border-bottom: 1px solid rgba(176,137,76,0.42);
  transition: color .18s, border-color .18s; overflow-wrap: break-word; }
.prose a:hover { color: var(--forest); border-color: var(--forest); }
.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.35em; }
.prose li { margin: 0 0 0.6em; padding-left: 0.2em; }
.prose li::marker { color: var(--brass); }
.prose img { max-width: 100%; height: auto; display: block; border-radius: 10px; margin: 1.8em 0; }
.prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--brass);
  font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--forest); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid rgba(20,61,46,0.16); margin: 2.4em 0; }
.prose code { font-family: var(--mono); font-size: 0.88em; background: rgba(20,61,46,0.07);
  border-radius: 4px; padding: 2px 6px; }
.prose pre { background: var(--forest); color: var(--cream); border-radius: 10px;
  padding: 20px 22px; overflow-x: auto; margin: 1.8em 0; }
.prose pre code { background: none; padding: 0; font-size: 13.5px; line-height: 1.6; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(20,61,46,0.14); }
.prose th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brassDk); }

.post__foot { margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid rgba(20,61,46,0.14);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.post__back { display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brassDk); }
.post__back .ar { transition: transform .2s; }
.post__back:hover .ar { transform: translateX(-5px); }

/* ---------- 7. responsive ---------- */
@media (max-width: 940px) {
  .pcard { grid-template-columns: 220px minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 860px) {
  .nav { padding: 14px 22px; gap: 16px; }
  .nav__links { display: none; }
  .subhead__inner { padding: 8px 22px; }
  .subhead__k { display: none; }
  .phead { padding: calc(var(--nav-h) + 30px) 22px 56px; }
  .ins, .post { padding-left: 22px; padding-right: 22px; }
  .footer__trees { height: 118px; }
  .footer__body { padding: 4px 22px 0; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 680px) {
  /* Thumbnail above the text rather than a cramped side column. */
  .pcard { grid-template-columns: 1fr; gap: 18px; }
  .pcard__thumb { aspect-ratio: 16 / 9; }
  .prose { font-size: 16.5px; }
}