@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..600&family=Open+Sans:wght@400;500;600;700&family=Courier+Prime:wght@400;700&display=swap');

/* ============================================================================
   LOKAL — "Latest thinking" home section + article byline / author bio card.
   Injected into ported Duda pages by PortLayout, so everything is scoped under
   .lkl-* and uses explicit fonts/colours (global.css isn't loaded here). Colours
   are kept WCAG-AA on cream so the page's contrast-fixer JS leaves them alone.
   ========================================================================== */
:where(.lkl-insights, .lkl-byline, .lkl-authorcard) *,
.lkl-insights, .lkl-byline, .lkl-authorcard { box-sizing: border-box; }

/* Duda's original article byline paragraph, hidden (we render our own styled one). */
[data-lkl-dupe] { display: none !important; }

.lkl-insights {
  --lkl-navy:#162250; --lkl-orange:#c75311; --lkl-muted:#5a5866; --lkl-body:#3f4763;
  --lkl-cream:#f4ece2; --lkl-surface:#f8f0e5; --lkl-line:rgba(22,34,80,.14);
  --lkl-serif:'Fraunces',Georgia,serif; --lkl-sans:'Open Sans',system-ui,sans-serif; --lkl-mono:'Courier Prime',ui-monospace,monospace;
  background:var(--lkl-cream);
  padding-block:clamp(3rem,6vw,5.5rem);
  font-family:var(--lkl-sans);
}
.lkl-wrap{ max-width:1180px; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }

.lkl-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.lkl-eyebrow{ margin:0 0 .55rem; font-family:var(--lkl-mono); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--lkl-orange); }
.lkl-h2{ margin:0; font-family:var(--lkl-serif); font-weight:400; font-size:clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height:1.05; letter-spacing:-.015em; color:var(--lkl-navy); }
.lkl-all{ font-family:var(--lkl-sans); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--lkl-orange); text-decoration:none; white-space:nowrap; }
.lkl-all:hover{ text-decoration:underline; }

.lkl-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(1.5rem,3.5vw,2.8rem); align-items:start; }

.lkl-card-meta{ display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; }
.lkl-chip{ font-family:var(--lkl-mono); text-transform:uppercase; letter-spacing:.1em; font-size:.64rem; color:var(--lkl-orange); background:rgba(199,83,17,.1); padding:.25rem .55rem; border-radius:4px; }
.lkl-date{ font-family:var(--lkl-mono); font-size:.72rem; letter-spacing:.04em; color:var(--lkl-muted); }

/* featured (left) */
.lkl-feature{ display:flex; flex-direction:column; text-decoration:none; color:var(--lkl-navy); }
.lkl-cover{ display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#e8e0d2; margin-bottom:1rem; }
.lkl-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.lkl-feature:hover .lkl-cover img{ transform:scale(1.03); }
.lkl-ftitle{ display:block; font-family:var(--lkl-serif); font-weight:400; font-size:clamp(1.45rem, 1.1rem + 1.4vw, 2.05rem); line-height:1.1; letter-spacing:-.01em; color:var(--lkl-navy); }
.lkl-feature:hover .lkl-ftitle{ color:var(--lkl-orange); }
.lkl-ex{ display:block; font-size:.95rem; line-height:1.6; color:var(--lkl-body); margin:.55rem 0 .9rem; max-width:54ch; }

/* list (right) */
.lkl-list{ display:flex; flex-direction:column; border-top:1px solid var(--lkl-line); }
.lkl-item{ display:grid; grid-template-columns:auto 1fr; gap:.95rem; align-items:center; padding:.95rem 0; border-bottom:1px solid var(--lkl-line); text-decoration:none; color:var(--lkl-navy); }
.lkl-thumb{ display:block; width:96px; height:66px; border-radius:8px; overflow:hidden; background:#e8e0d2; }
.lkl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.lkl-itxt{ display:block; min-width:0; }
.lkl-ititle{ display:block; font-family:var(--lkl-serif); font-weight:400; font-size:1.08rem; line-height:1.18; letter-spacing:-.005em; color:var(--lkl-navy); margin-top:.15rem; }
.lkl-item:hover .lkl-ititle{ color:var(--lkl-orange); }

/* shared byline */
.lkl-byline{ display:flex; align-items:center; gap:.6rem; }
.lkl-av{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top center; background:#d8cfc0; box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(199,83,17,.55); }
.lkl-by-text{ display:flex; flex-direction:column; line-height:1.25; }
.lkl-by-line{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline; }
.lkl-by-name{ font-weight:700; font-size:.92rem; color:var(--lkl-navy); }
.lkl-by-role{ font-size:.82rem; color:var(--lkl-orange); }
.lkl-by-meta{ font-family:var(--lkl-mono); font-size:.72rem; color:var(--lkl-muted); }
.lkl-byline--sm .lkl-av{ width:30px; height:30px; box-shadow:none; }
.lkl-byline--sm .lkl-by-name{ font-size:.85rem; }

@media (max-width:760px){
  .lkl-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .lkl-head{ align-items:flex-start; }
}

/* ---- article byline (top, under <h1>) ---- */
.lkl-byline{
  --lkl-navy:#162250; --lkl-orange:#c75311; --lkl-muted:#5a5866;
  --lkl-serif:'Fraunces',Georgia,serif; --lkl-sans:'Open Sans',system-ui,sans-serif; --lkl-mono:'Courier Prime',ui-monospace,monospace;
  font-family:var(--lkl-sans); margin:1rem 0 1.6rem;
}

/* ---- article author bio card (end) ---- */
.lkl-authorcard{
  --lkl-navy:#162250; --lkl-orange:#c75311; --lkl-body:#3f4763;
  --lkl-surface:#f8f0e5; --lkl-line:rgba(22,34,80,.14);
  --lkl-serif:'Fraunces',Georgia,serif; --lkl-sans:'Open Sans',system-ui,sans-serif; --lkl-mono:'Courier Prime',ui-monospace,monospace;
  font-family:var(--lkl-sans);
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start;
  /* match the article body: text column is ~807px, centered, with 40px section gutters */
  width:min(807px, 100% - 80px); margin:2.5rem auto; padding:clamp(1.3rem, 3vw, 1.6rem);
  background:var(--lkl-surface); border:1px solid var(--lkl-line); border-radius:14px;
}
.lkl-ac-av{ flex:0 0 auto; width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:top center; background:#d8cfc0; box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(199,83,17,.55); }
.lkl-ac-body{ min-width:0; }
.lkl-ac-name{ margin:0; font-family:var(--lkl-serif); font-weight:500; font-size:1.3rem; letter-spacing:-.01em; color:var(--lkl-navy); }
.lkl-ac-role{ margin:.2rem 0 .55rem; font-family:var(--lkl-mono); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:var(--lkl-orange); }
.lkl-ac-bio{ margin:0; font-size:.92rem; line-height:1.6; color:var(--lkl-body); }
.lkl-ac-link{ display:inline-block; margin-top:.7rem; font-weight:600; font-size:.8rem; color:var(--lkl-orange); text-decoration:none; }
.lkl-ac-link:hover{ text-decoration:underline; }
@media (max-width:520px){ .lkl-authorcard{ grid-template-columns:1fr; } }

/* ============================================================================
   Duda override armor. Duda styles #dm h2/h3/p/a/img with higher specificity
   than a plain class — but WITHOUT !important — so !important on our classes wins
   the cascade. Scoped strictly to .lkl-* so nothing else is affected.
   ========================================================================== */
.lkl-h2{ font-family:var(--lkl-serif)!important; font-weight:400!important; font-size:clamp(1.7rem, 1.2rem + 2vw, 2.6rem)!important; line-height:1.05!important; letter-spacing:-.015em!important; color:var(--lkl-navy)!important; margin:0!important; }
.lkl-eyebrow{ font-family:var(--lkl-mono)!important; font-size:.72rem!important; letter-spacing:.16em!important; text-transform:uppercase!important; color:var(--lkl-orange)!important; margin:0 0 .55rem!important; }
.lkl-ftitle,.lkl-ititle{ font-family:var(--lkl-serif)!important; font-weight:400!important; color:var(--lkl-navy)!important; }
.lkl-ftitle{ font-size:clamp(1.45rem, 1.1rem + 1.4vw, 2.05rem)!important; line-height:1.1!important; }
.lkl-ititle{ font-size:1.08rem!important; line-height:1.18!important; }
.lkl-ex{ font-family:var(--lkl-sans)!important; font-size:.95rem!important; line-height:1.6!important; color:var(--lkl-body)!important; }
.lkl-chip{ font-family:var(--lkl-mono)!important; color:var(--lkl-orange)!important; }
.lkl-date,.lkl-by-meta{ font-family:var(--lkl-mono)!important; color:var(--lkl-muted)!important; }
.lkl-by-name{ font-family:var(--lkl-sans)!important; font-weight:700!important; color:var(--lkl-navy)!important; }
.lkl-by-role{ color:var(--lkl-orange)!important; }
.lkl-insights a,.lkl-byline a,.lkl-authorcard a,.lkl-feature,.lkl-item,.lkl-all,.lkl-ac-link{ text-decoration:none!important; }
.lkl-feature,.lkl-item{ color:var(--lkl-navy)!important; }
.lkl-all,.lkl-ac-link{ color:var(--lkl-orange)!important; }
.lkl-ac-name{ font-family:var(--lkl-serif)!important; font-weight:500!important; font-size:1.3rem!important; color:var(--lkl-navy)!important; margin:0!important; }
.lkl-ac-role{ font-family:var(--lkl-mono)!important; color:var(--lkl-orange)!important; margin:.2rem 0 .55rem!important; }
.lkl-ac-bio{ font-family:var(--lkl-sans)!important; font-size:.92rem!important; line-height:1.6!important; color:var(--lkl-body)!important; margin:0!important; }
.lkl-insights img,.lkl-byline img,.lkl-authorcard img{ max-width:100%!important; border:0!important; }
.lkl-cover img,.lkl-thumb img{ width:100%!important; height:100%!important; object-fit:cover!important; }
.lkl-av,.lkl-ac-av{ border-radius:50%!important; object-fit:cover!important; }