/* ══════════════════════════════════════════════════════════════════
   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 is GONE (2026-08-12). It was a fourth surface, #f1f1f3, carrying
     the invitation / speaking / teaser / request bands. It had already been
     re-toned once with a deliberate -2 blue offset so it could not read warm
     under simultaneous contrast against the white either side - and it was
     still being read as cream. The hue was never the problem: a palette locked
     to ink, card and paper cannot hold a fourth near-white without it reading
     as a cast. Those bands are paper now and separate on space, which is the
     same answer the hairlines got. Do not reintroduce a tinted band; if a
     section needs to stand apart, give it ink or give it room. */
  --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:var(--ml-ink);
  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{
  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:28px;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:22px;
}

.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}

/* The five types were button widgets, each linking to the page they already sat
   on, so a click reloaded Publications - the same false affordance corrected on
   the Perspectives themes. They are headings now, and take the same editorial
   treatment those themes use, so the two "browse by" lists read as one system
   (6, 23). No box, no hover fill: there is nothing yet to open. */

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

#pub-types-grid .ml-theme{cursor:default}

#pub-types-grid .ml-theme .elementor-heading-title{
  font-family:"Literata",Georgia,serif;
  font-weight:400;
  font-size:1.375rem;
  line-height:1.35;
  letter-spacing:0;
  color:var(--ml-ink);
  text-transform:none;
  padding:26px 0 24px;
  border:none;
  background:none;
  cursor:default;
}

/* The types stand on their own spacing - see the same decision on Perspectives. */

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

#pub-request.e-con{
  color:var(--ml-ink);
  padding:clamp(116px,13vw,196px) 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(2,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}
  /* Cards stack vertically on a phone (14). */
  #pub-types-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #pub-types-grid .ml-theme .elementor-heading-title{font-size:1.1875rem;padding:20px 0 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}
}

/* ── Featured publication and the library ────────────────────────────
   PAGES.docx, PAGE 6: "Each publication shall be presented as a
   publication rather than a PDF. No document lists. No download tables.
   No file names." So: a cover with its own proportions, a title, a short
   introduction, quiet metadata, and one button that reads like an
   invitation rather than a file action. */

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

#pub-featured-wrap.e-con{
  max-width:1300px;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(40px,5vw,76px);
  align-items:center;
}

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

.ml-pub-cover img{
  width:100%;
  height:auto;
  display:block;
  /* the covers are LinkedIn artwork and carry their own colour; graded to
     the site's monochrome so the page stays one material */
  filter:grayscale(1);
}

#pub-featured .ml-section-title .elementor-heading-title{margin:18px 0 22px;max-width:20ch}
#pub-featured .ml-body,
#pub-featured .ml-body p{font-size:1.0625rem;line-height:1.62;color:var(--ml-grey);max-width:54ch}

.ml-pub-meta .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ml-grey);
  margin-top:24px;
}

#pub-featured .ml-go{margin-top:26px}

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

#pub-item-1.e-con{padding:0;--width:100%;max-width:none}
#pub-item-1 .ml-title{margin-top:22px}
#pub-item-1 .ml-excerpt{margin-top:10px}
#pub-item-1 .ml-go{margin-top:16px}

@media (max-width:1024px){
  #pub-featured-wrap.e-con{grid-template-columns:minmax(0,1fr);gap:34px}
  #pub-library-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  #pub-library-grid.e-con{grid-template-columns:minmax(0,1fr)}
}

/* #pub-featured is a PAPER section, but .ml-go inherits the paper-coloured
   text of the ink sections where that class normally lives, so the button
   rendered white on white and measured invisible. Same trap as the
   Perspectives hero eyebrow: on this site a control takes its colour from
   the section it sits in, and a paper section has to say so. */
#pub-featured .ml-go .elementor-button{
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}
#pub-featured .ml-go .elementor-button:hover,
#pub-featured .ml-go .elementor-button:focus{
  color:var(--ml-paper);
  background-color:var(--ml-ink);
  border-color:var(--ml-ink);
}

/* #pub-close-actions had no rule at all, so the closing button sat hard left
   inside a centred section: measured x=116 in a 3440 viewport, 1502px off the
   axis. Invisible at laptop widths because the container filled the column;
   only the ultrawide viewports exposed it. Mirrors #persp-close-actions. */
#pub-close-actions.e-con{
  margin-top:64px;
  padding:0;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  --width:auto;
}