/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | Elementor house styles
   Archivo structure, Literata voice. Black / white / soft grey only,
   accent reserved for hover and active states (IMPLEMENTATION GUIDE 7).

   Selector policy, established by testing this build rather than by
   assumption: container elements do NOT output custom CSS classes, so
   sections are addressed by their Elementor element ID, and everything
   inside a loop is addressed through the widget classes and the
   .e-loop-item wrapper Elementor generates per post.
   ══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Archivo";
  src:url('fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:"Literata";
  src:url('fonts/literata-var.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

:root{
  --ml-ink:#000000;
  --ml-paper:#ffffff;
  --ml-charcoal:#0e0e0c;
  --ml-grey:#595959;
  --ml-grey-light:#a5a5a5;
  --ml-mist-ink:rgba(255,255,255,.82);
  --ml-line-ink:rgba(255,255,255,.18);
  --ml-gut:clamp(28px,5.4vw,116px);
  --ml-maxw:1680px;
}

/* ── Responsive hygiene, site-wide ──────────────────────────────────
   Applies to every page, not only the feeds. Deliberately targeted:
   `overflow-x:hidden` on the page would hide layout faults rather than
   fix them, so instead the things that actually break the viewport are
   made to behave - long unbroken strings (email addresses, URLs) and
   media that ignores its container. */

img,
video,
iframe,
table{
  max-width:100%;
}

.elementor-icon-list-text,
.elementor-icon-list-item > a,
.elementor-widget-text-editor a,
.elementor-widget-heading a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ── Feed section ───────────────────────────────────────────────── */

#ml-news.e-con{
  background-color:var(--ml-charcoal);
  color:var(--ml-paper);
  padding:clamp(96px,11vw,168px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#ml-news-head.e-con{
  max-width:var(--ml-maxw);
  margin:0 auto clamp(48px,5vw,78px);
  padding:0;
}

#ml-news-head .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:560;
  font-size:clamp(30px,3.1vw,50px);
  line-height:1.04;
  letter-spacing:-.035em;
  color:var(--ml-paper);
}

#ml-news .elementor-widget-loop-grid{
  max-width:var(--ml-maxw);
  margin:0 auto;
}

/* ── The card: one post inside a loop ───────────────────────────── */

.elementor-widget-loop-grid .e-loop-item{
  border-top:1px solid var(--ml-line-ink);
  padding-top:26px;
  transition:border-color .3s ease;
}

.elementor-widget-loop-grid .e-loop-item:hover{
  border-top-color:rgba(255,255,255,.45);
}

.ml-kicker .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.6562rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ml-grey-light);
}

.ml-kicker a{
  color:inherit;
  text-decoration:none;
}

.ml-title{margin-top:16px}

.ml-title .elementor-heading-title,
.ml-title .elementor-heading-title a{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:540;
  font-size:clamp(19px,1.5vw,25px);
  line-height:1.16;
  letter-spacing:-.03em;
  color:var(--ml-paper);
  text-decoration:none;
  transition:opacity .3s ease;
}

.ml-title .elementor-heading-title a:hover{opacity:.72}

.ml-excerpt{margin-top:14px}

.ml-excerpt,
.ml-excerpt p{
  font-family:"Literata",Georgia,serif;
  font-size:1rem;
  line-height:1.62;
  color:var(--ml-mist-ink);
}

.ml-date{margin-top:18px}

.ml-date .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.6562rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ml-grey-light);
}

.ml-go{margin-top:20px}

.ml-go .elementor-button{
  font-family:"Literata",Georgia,serif;
  font-weight:520;
  font-size:.9375rem;
  color:var(--ml-paper);
  background:none;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.5);
  border-radius:0;
  padding:0 0 3px;
  transition:border-color .3s ease,opacity .3s ease;
}

.ml-go .elementor-button:hover,
.ml-go .elementor-button:focus{
  background:none;
  color:var(--ml-paper);
  border-bottom-color:var(--ml-paper);
  opacity:.78;
}

/* ── Responsive ─────────────────────────────────────────────────────
   Built in from the start, not retrofitted. Type and section padding
   scale fluidly through clamp() above; the rules below handle the
   structural steps. Column counts are set on the Loop Grid widget
   itself (3 / 2 / 1) so an editor can change them in the UI.
   Checked at 1440, 1024, 768 and 390. */

@media (max-width:1024px){
  #ml-news-head.e-con{margin-bottom:clamp(38px,5vw,58px)}
  .ml-title .elementor-heading-title,
  .ml-title .elementor-heading-title a{font-size:clamp(19px,2.4vw,23px)}
}

@media (max-width:782px){
  .elementor-widget-loop-grid .e-loop-item{padding-top:22px}
  .ml-excerpt,
  .ml-excerpt p{font-size:.9688rem}
}

@media (max-width:430px){
  #ml-news.e-con{padding-left:24px;padding-right:24px}
  .ml-title .elementor-heading-title,
  .ml-title .elementor-heading-title a{font-size:21px;line-height:1.2}
}

/* Fade only (IMPLEMENTATION GUIDE 13): no movement. */
@media (prefers-reduced-motion:no-preference){
  .elementor-widget-loop-grid .e-loop-item{
    animation:ml-fade .85s cubic-bezier(.22,.61,.21,1) both;
  }
  @keyframes ml-fade{from{opacity:.001}to{opacity:1}}
}

/* Nothing is removed on small screens (IMPLEMENTATION GUIDE 14). */
@media (max-width:782px){
  .ml-excerpt,
  .ml-date,
  .ml-kicker{display:block}
}