/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | Publications

   Port of _site/publications.html. Section order: hero, featured
   publication, publication library (ink), browse by type, request band
   (stone), closing statement.

   The cover: one template, only the title and the type change. Imprint
   at the head, title and type set together at the foot over a hairline,
   the field left open between them. The cover IS the card - there is no
   outer bordered box around it, because a bordered card wrapping a
   bordered cover reads as a frame inside a frame and makes the library
   look hollow.

   Containers emit no custom CSS classes in this build, so sections and
   covers are addressed by Elementor element ID; widgets are addressed
   by class.

   Responsive steps: 1180 / 782 / 430. No overflow-x:hidden anywhere.
   ══════════════════════════════════════════════════════════════════ */

#pub-hero,
#pub-featured,
#pub-library,
#pub-types,
#pub-request,
#pub-close{
  --pg-stone:#f2f2f2;
  --pg-mist-paper:#4a4a4a;
  --pg-line-paper:rgba(0,0,0,.15);
}

/* ── Hero ───────────────────────────────────────────────────────── */

#pub-hero.e-con{
  position:relative;
  min-height:100svh;
  padding:clamp(138px,16vh,210px) var(--ml-gut) clamp(54px,7vh,96px);
  background-color:#000;
  background-position:center 42%;
  background-size:cover;
  background-repeat:no-repeat;
  justify-content:center;
  align-items:center;
  text-align:center;
  --width:100%;
  max-width:none;
}

#pub-hero.e-con::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.54) 42%,rgba(0,0,0,.3) 66%,rgba(0,0,0,.8)),
    linear-gradient(180deg,rgba(0,0,0,.35),transparent 40%,rgba(0,0,0,.78));
}

#pub-hero > *{position:relative;z-index:2}

#pub-hero-copy.e-con{
  max-width:1180px;
  padding:0;
  align-items:center;
  text-align:center;
  --width:100%;
}

#pub-hero .ml-hero-mark img{
  width:clamp(64px,6vw,92px);
  height:auto;
  display:block;
}

#pub-hero .elementor-heading-title{color:var(--ml-paper)}
#pub-hero .ml-eyebrow .elementor-heading-title{color:rgba(255,255,255,.84)}
#pub-hero .ml-page-title{margin-top:34px}
#pub-hero .ml-lead{margin-top:30px;max-width:66ch}
#pub-hero .ml-lead,
#pub-hero .ml-lead p{color:rgba(255,255,255,.86)}

/* ── The cover ──────────────────────────────────────────────────────
   Shared by the featured cover and every library cover. Sized by
   aspect-ratio so the proportion holds at any column width. */

#pub-featured-cover.e-con,
#pub-cover-1.e-con,
#pub-cover-2.e-con,
#pub-cover-3.e-con,
#pub-cover-4.e-con,
#pub-cover-5.e-con,
#pub-cover-6.e-con{
  position:relative;
  aspect-ratio:4/5;
  background-color:var(--ml-ink);
  border:1px solid var(--ml-line-ink);
  color:var(--ml-paper);
  padding:clamp(24px,2vw,32px);
  justify-content:flex-start;
  --width:100%;
  max-width:none;
}

.ml-cover-brand .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.5938rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* The imprint rule: part of the imprint, not a separate element to
   maintain. */
.ml-cover-brand .elementor-heading-title::after{
  content:"";
  display:block;
  width:34px;
  height:2px;
  margin-top:12px;
  background-color:rgba(255,255,255,.6);
}

/* The open field sits between the imprint and the foot. */
.ml-cover-title{margin-top:auto}

.ml-cover-title .elementor-heading-title{
  font-family:"Literata",Georgia,serif;
  font-weight:500;
  font-size:clamp(1.25rem,1.55vw,1.55rem);
  line-height:1.24;
  color:var(--ml-paper);
}

.ml-cover-type{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.18);
}

.ml-cover-type .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.5938rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* ── Featured publication ───────────────────────────────────────── */

#pub-featured.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(56px,6vw,96px) var(--ml-gut) clamp(96px,12vw,168px);
  --width:100%;
  max-width:none;
}

#pub-featured-wrap.e-con{
  max-width:1200px;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:clamp(40px,5.5vw,80px);
  align-items:center;
}

#pub-featured-text.e-con{padding:0;--width:100%;max-width:none}

#pub-featured .ml-section-title .elementor-heading-title{
  font-size:clamp(26px,2.6vw,36px);
  line-height:1.18;
  margin:18px 0 20px;
}

#pub-featured .ml-body,
#pub-featured .ml-body p{
  font-size:1.0938rem;
  line-height:1.7;
  color:var(--pg-mist-paper);
  max-width:50ch;
}

#pub-featured-cta.e-con{
  margin-top:30px;
  padding:0;
  gap:16px;
  flex-wrap:wrap;
  --width:auto;
}

#pub-featured .ml-btn-primary .elementor-button{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-ink);
}

#pub-featured .ml-btn-primary .elementor-button:hover,
#pub-featured .ml-btn-primary .elementor-button:focus{
  background-color:transparent;
  color:var(--ml-ink);
}

#pub-featured .ml-btn-secondary .elementor-button{
  background-color:transparent;
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}

#pub-featured .ml-btn-secondary .elementor-button:hover,
#pub-featured .ml-btn-secondary .elementor-button:focus{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
}

/* ── Publication library (ink) ──────────────────────────────────── */

#pub-library.e-con{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  padding:clamp(106px,13vw,182px) var(--ml-gut) clamp(120px,14vw,200px);
  --width:100%;
  max-width:none;
}

#pub-library-head.e-con{
  max-width:1300px;
  margin:0 auto;
  padding:0;
}

#pub-library-head .elementor-heading-title{color:var(--ml-paper)}

#pub-library-grid.e-con{
  max-width:1300px;
  margin:clamp(48px,5vw,78px) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:64px 48px;
  align-items:start;
}

/* The item carries no frame of its own: the cover is the card, and the
   caption sits directly beneath it on the section field. */
#pub-item-1.e-con,
#pub-item-2.e-con,
#pub-item-3.e-con,
#pub-item-4.e-con,
#pub-item-5.e-con,
#pub-item-6.e-con{
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  --width:100%;
  max-width:none;
}

#pub-library .ml-title{margin-top:26px}

#pub-library .ml-title .elementor-heading-title{
  font-weight:500;
  font-size:1.1875rem;
  line-height:1.32;
  letter-spacing:-.01em;
}

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

#pub-library .ml-meta{margin-top:10px}

#pub-library .ml-excerpt{margin-top:12px}

#pub-library .ml-excerpt,
#pub-library .ml-excerpt p{
  font-size:1rem;
  line-height:1.62;
  color:var(--ml-mist-ink);
}

#pub-links-1.e-con,
#pub-links-2.e-con,
#pub-links-3.e-con,
#pub-links-4.e-con,
#pub-links-5.e-con,
#pub-links-6.e-con{
  margin-top:16px;
  padding:0;
  gap:20px;
  --width:auto;
}

#pub-library .ml-go{margin-top:0}
#pub-library .ml-go .elementor-button{font-size:.9375rem}

/* ── Browse by type ─────────────────────────────────────────────── */

#pub-types.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(106px,13vw,182px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#pub-types-head.e-con{
  max-width:1200px;
  margin:0 auto;
  padding:0;
  align-items:center;
  text-align:center;
}

#pub-types-head .ml-section-title{margin-top:20px}

#pub-types-grid.e-con{
  max-width:1200px;
  margin:clamp(48px,5vw,80px) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
  --width:100%;
}

#pub-types-grid .ml-tile .elementor-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:100%;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:1.0312rem;
  letter-spacing:.2px;
  text-align:center;
  color:var(--ml-ink);
  background-color:transparent;
  border:1px solid var(--pg-line-paper);
  border-radius:12px;
  padding:30px 22px;
  transition:background-color .3s ease,color .3s ease;
}

#pub-types-grid .ml-tile .elementor-button:hover,
#pub-types-grid .ml-tile .elementor-button:focus{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
}

/* ── Request band (stone) ───────────────────────────────────────── */

#pub-request.e-con{
  background-color:var(--pg-stone);
  color:var(--ml-ink);
  padding:clamp(96px,11vw,164px) var(--ml-gut);
  text-align:center;
  align-items:center;
  --width:100%;
  max-width:none;
}

#pub-request .ml-subhead .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:clamp(26px,2.6vw,36px);
  line-height:1.18;
  letter-spacing:-.01em;
  max-width:24ch;
  margin:18px auto 0;
}

#pub-request .ml-body,
#pub-request .ml-body p{
  font-size:1.0625rem;
  line-height:1.68;
  color:var(--pg-mist-paper);
  max-width:52ch;
  margin:22px auto 0;
}

#pub-request .ml-btn{margin-top:34px}

#pub-request .ml-btn-primary .elementor-button{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-ink);
}

#pub-request .ml-btn-primary .elementor-button:hover,
#pub-request .ml-btn-primary .elementor-button:focus{
  background-color:transparent;
  color:var(--ml-ink);
}

/* ── Closing statement ──────────────────────────────────────────── */

#pub-close.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(120px,15vw,200px) var(--ml-gut);
  text-align:center;
  align-items:center;
  --width:100%;
  max-width:none;
}

#pub-close .ml-statement .elementor-heading-title{
  max-width:28ch;
  margin:26px auto 0;
  color:var(--ml-ink);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width:1180px){
  #pub-featured-wrap.e-con{
    grid-template-columns:minmax(0,1fr);
    gap:40px;
    justify-items:start;
  }
  /* Stacked, the featured cover would otherwise run the full column. */
  #pub-featured-cover.e-con{max-width:320px}
  #pub-library-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px}
  #pub-types-grid.e-con{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:782px){
  #pub-hero.e-con{background-position:58% 36%}
  #pub-library-grid.e-con{grid-template-columns:minmax(0,1fr);gap:48px}
  #pub-types-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pub-types-grid .ml-tile .elementor-button{padding:26px 18px}
  #pub-featured .ml-body,
  #pub-featured .ml-body p{font-size:1.0312rem}
}

@media (max-width:430px){
  #pub-hero.e-con,
  #pub-featured.e-con,
  #pub-library.e-con,
  #pub-types.e-con,
  #pub-request.e-con,
  #pub-close.e-con{padding-left:24px;padding-right:24px}
  /* One column: the cover keeps its proportion but stops dominating the
     scroll. */
  #pub-featured-cover.e-con,
  #pub-cover-1.e-con,
  #pub-cover-2.e-con,
  #pub-cover-3.e-con,
  #pub-cover-4.e-con,
  #pub-cover-5.e-con,
  #pub-cover-6.e-con{max-width:300px;padding:24px}
  #pub-featured-cta .elementor-button,
  #pub-request .ml-btn .elementor-button{width:100%;text-align:center}
}