/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | Perspectives

   Port of _site/perspectives.html. Section order: hero, featured
   perspective, latest perspectives (ink), browse by topic, publications
   teaser + newsletter (stone), closing statement.

   Addressing follows the house policy proven by this build: containers
   emit no custom CSS classes, so every section is reached through its
   Elementor element ID; everything inside is reached through the widget
   classes declared in ml-site.css / ml-elementor.css.

   Responsive steps: 1180 / 782 / 430. No overflow-x:hidden anywhere -
   anything that would break the viewport is made to behave instead.
   ══════════════════════════════════════════════════════════════════ */

/* Values the page needs that the shared sheets do not publish as
   custom properties. Namespaced so they cannot collide with the
   site-wide --ml-* set. */
#persp-hero,
#persp-featured,
#persp-latest,
#persp-topics,
#persp-band,
#persp-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 ───────────────────────────────────────────────────────── */

/* Ink hero carrying a photograph, 2026-08-12.
   NOTE THE CONFLICT, because it is deliberate and a future reader deserves it:
   PAGES.docx specifies for this hero "Plain white background. No photograph."
   Review 3 (01/08/2026) then asked to "Replace the apartment building image"
   WITH "a premium black-and-white image of: a boardroom discussion; documents
   on a boardroom table; executives reviewing reports." Those instructions cannot
   both hold. The later one is the client reviewing the built page and naming the
   subject she wants, so it wins - but if the bible is reasserted, revert to
   background-color:var(--ml-paper), colour the type ink again, and restore the
   page-id-1968 ink-nav block in ml-site.css. */
#persp-hero.e-con{
  position:relative;
  padding:clamp(118px,13vh,168px) var(--ml-gut) clamp(48px,6vh,80px);
  background-color:#0b0b0a;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  color:var(--ml-paper);
  justify-content:center;
  align-items:center;
  text-align:center;
  --width:100%;
  max-width:none;
}

#persp-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));
}

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

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

#persp-hero .ml-hero-mark img{
  height:auto;
  display:block;
}

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

/* ── Featured perspective ───────────────────────────────────────── */

#persp-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;
}

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

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

#persp-featured-media.e-con{
  aspect-ratio:4/3;
  overflow:hidden;
  background-color:var(--ml-paper);
}

.ml-featured-img,
.ml-featured-img .elementor-image,
.ml-featured-img a{height:100%;line-height:0}

.ml-featured-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.08);
}

#persp-featured .ml-section-title .elementor-heading-title{margin:18px 0 24px}

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

/* The "continue reading" affordance is the shared .ml-go outline,
   flipped to ink because this section sits on paper. */
#persp-featured .ml-go{margin-top:30px}

#persp-featured .ml-go .elementor-button{
  font-size:1rem;
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}

#persp-featured .ml-go .elementor-button:hover,
#persp-featured .ml-go .elementor-button:focus{
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}

/* ── Latest perspectives (ink) ──────────────────────────────────── */

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

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

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

#persp-latest-grid.e-con{
  max-width:1300px;
  margin:clamp(44px,5vw,72px) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}

#persp-article-1.e-con,
#persp-article-2.e-con,
#persp-article-3.e-con,
#persp-article-4.e-con,
#persp-article-5.e-con,
#persp-article-6.e-con{
  padding:24px;
  background-color:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  box-shadow:0 16px 36px rgba(0,0,0,.35);
  --width:100%;
  max-width:none;
  transition:background-color .32s ease,border-color .32s ease,transform .32s ease;
}

#persp-article-1:hover,
#persp-article-2:hover,
#persp-article-3:hover,
#persp-article-4:hover,
#persp-article-5:hover,
#persp-article-6:hover{
  background-color:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-3px);
}

#persp-article-art-1.e-con,
#persp-article-art-2.e-con,
#persp-article-art-3.e-con,
#persp-article-art-4.e-con,
#persp-article-art-5.e-con,
#persp-article-art-6.e-con{
  padding:0;
  aspect-ratio:16/10;
  overflow:hidden;
  background-color:#1a1a1a;
  border-radius:8px;
  --width:100%;
  max-width:none;
}

.ml-article-art,
.ml-article-art .elementor-image,
.ml-article-art a{height:100%;line-height:0}

.ml-article-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.08);
  transition:transform .5s ease;
}

#persp-latest-grid .e-con:hover .ml-article-art img{transform:scale(1.04)}

#persp-article-copy-1.e-con,
#persp-article-copy-2.e-con,
#persp-article-copy-3.e-con,
#persp-article-copy-4.e-con,
#persp-article-copy-5.e-con,
#persp-article-copy-6.e-con{
  padding:0;
  flex:1 1 auto;
  --width:100%;
  max-width:none;
}

#persp-latest .ml-title{margin-top:20px}

#persp-latest .ml-title .elementor-heading-title{
  font-weight:570;
  font-size:1.25rem;
  line-height:1.2;
  letter-spacing:-.025em;
}

#persp-latest .ml-excerpt{margin-top:10px}

#persp-latest .ml-excerpt,
#persp-latest .ml-excerpt p{
  font-size:.9688rem;
  line-height:1.68;
  color:rgba(255,255,255,.76);
}

#persp-latest .ml-go{margin-top:16px;align-self:flex-start}

#persp-latest .ml-go .elementor-button{font-size:.875rem}

/* ── Browse by topic ────────────────────────────────────────────── */

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

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

#persp-topics-head .ml-section-title{margin-top:20px}

#persp-topics-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%;
}

/* A topic tile is the shared button shape given a card footprint, so an
   editor adds or removes a topic by adding or removing a button. */
#persp-topics-grid .ml-tile .elementor-button{
  display:flex;
  align-items:center;
  width:100%;
  min-height:100%;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:1.1875rem;
  letter-spacing:.3px;
  text-align:left;
  color:var(--ml-ink);
  background-color:transparent;
  border:1px solid var(--pg-line-paper);
  border-radius:12px;
  padding:34px 30px;
  transition:background-color .3s ease,color .3s ease;
}

/* CORRECTED 2026-08-17: never set border-color on hover, so it fell
   through to Elementor's own kit-level default for every button widget
   site-wide (an inline style, not in this repo) - a leftover factory
   blue nobody had customized. Same bug, same day, as .ml-mom-related-link;
   see that fix in ml-page-moments.css for the full explanation. */
#persp-topics-grid .ml-tile .elementor-button:hover,
#persp-topics-grid .ml-tile .elementor-button:focus{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-ink);
}

/* ── Publications teaser + newsletter (stone) ───────────────────── */

/* With the stone gone this band falls through to ink, which is the right answer:
   it keeps the separation the tint was providing, using a locked surface. Its
   text is set white elsewhere; declaring ink here would be a lie the next reader
   has to disprove. */
#persp-band.e-con{
  padding:clamp(116px,13vw,196px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#persp-band-wrap.e-con{
  max-width:1100px;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,70px);
  align-items:start;
}

#persp-band-teaser.e-con,
#persp-band-stay.e-con{padding:0;--width:100%;max-width:none}

#persp-band .ml-subhead .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:1.625rem;
  line-height:1.2;
  letter-spacing:.02em;
  margin-top:14px;
}

#persp-band .ml-body,
#persp-band .ml-body p{
  font-size:1.0312rem;
  line-height:1.68;
  color:var(--pg-mist-paper);
  max-width:46ch;
  margin-top:16px;
}

#persp-band .ml-btn{margin-top:28px}

/* Buttons on paper invert the ink-background defaults from ml-site.css. */
#persp-band .ml-btn-primary .elementor-button{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-ink);
}

#persp-band .ml-btn-primary .elementor-button:hover,
#persp-band .ml-btn-primary .elementor-button:focus{
  background-color:var(--ml-ink) !important;
  color:var(--ml-paper) !important;
  border-color:var(--ml-paper) !important;
}

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

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

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

#persp-close-actions.e-con{
  margin-top:64px;
  padding:0;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  --width:auto;
}

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

#persp-close .ml-btn-primary .elementor-button:hover,
#persp-close .ml-btn-primary .elementor-button:focus{
  background-color:var(--ml-ink) !important;
  color:var(--ml-paper) !important;
  border-color:var(--ml-paper) !important;
}

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

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

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

@media (max-width:1180px){
  #persp-featured-wrap.e-con{grid-template-columns:minmax(0,1fr)}
  #persp-latest-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
  #persp-topics-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
  #persp-band-wrap.e-con{grid-template-columns:minmax(0,1fr);gap:50px}
  /* The second column becomes a following block, so the divide moves
     from the side to the top. */
  #persp-band-stay.e-con{
    padding-top:58px;
  }
}

@media (max-width:782px){
  #persp-hero.e-con{background-position:58% 34%}
  #persp-latest-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #persp-topics-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #persp-featured .ml-body,
  #persp-featured .ml-body p{font-size:1.0625rem}
  #persp-topics-grid .ml-tile .elementor-button{
    font-size:1.0625rem;
    padding:28px 24px;
  }
}

@media (max-width:430px){
  #persp-hero.e-con,
  #persp-featured.e-con,
  #persp-latest.e-con,
  #persp-topics.e-con,
  #persp-band.e-con,
  #persp-close.e-con{padding-left:24px;padding-right:24px}
  #persp-close-actions .elementor-button{width:100%}
  #persp-band .ml-btn .elementor-button{width:100%;text-align:center}
  #persp-article-1.e-con,
  #persp-article-2.e-con,
  #persp-article-3.e-con,
  #persp-article-4.e-con,
  #persp-article-5.e-con,
  #persp-article-6.e-con{padding:20px}
}

/* ── Themes as editorial signposts (client review 2, Perspectives 3)
   These were buttons, all linking back to this same page, which read
   as six empty categories. Her direction: keep the six visible, do
   not make them clickable, create no empty category pages, and do
   not write "Coming Soon" - it should read as complete rather than
   unfinished. So they are headings now, not styled-down buttons:
   no border, no fill, no hover state, no pointer. Typography and
   space carry them; an entrance fade is the only movement, per
   guide 13. */

#persp-topics-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;
}

#persp-topics-grid .ml-theme{cursor:default}

/* The themes stand on their own spacing. A rule under each turned a set of
   ideas into a table of rows. */

@media (max-width:600px){
  #persp-topics-grid .ml-theme .elementor-heading-title{
    font-size:1.1875rem;
    padding:20px 0 18px;
  }
}

/* ── The band's two columns are a matched pair ──────────────────────
   Eyebrow, subhead and body already lined up across the two columns; only the
   buttons drifted, 25px apart, because one body runs longer. The fact that the
   first three tiers align is what proves the pair is meant to be read across,
   so the button belongs on the same line too.

   Two items in two columns is always a single row, so row-gap:0 has no card-row
   gap to destroy here and no margin compensation is needed. Below 1180px the
   band stacks to one column and there is nothing to align. */
@media (min-width:1181px){
  @supports (grid-template-rows: subgrid){
    #persp-band-wrap.e-con{
      grid-template-rows:auto auto auto auto;
      row-gap:0;
    }
    #persp-band-teaser.e-con,
    #persp-band-stay.e-con{
      grid-row:span 4;
      display:grid;
      grid-template-rows:subgrid;
      align-content:start;
    }
  }
}