/* Mackasey — homepage only. Opportunity Ecosystem Map (simplified view).
   Page-scoped by design: site.css is shared by every page and stays untouched.
   One objective at the centre, eight ecosystems around it. The full five-stage
   Map belongs on the Intelligence page. Every label is real text; the SVG
   carries connecting lines only. No JavaScript, no hover dependency.
   Colours, type and spacing come entirely from the tokens in site.css. */

.oem{ margin:0 }

/* --- DESKTOP: the ecosystem ---------------------------------------------
   The stage holds a fixed 100 x 78 proportion so the percentage positions
   below map predictably onto both the circles and the connecting lines. */
.oem__stage{
  position:relative;
  aspect-ratio:100 / 78;
  /* type inside the map scales to the map itself, not the viewport, so the
     labels stay readable whether the column is 596px or the full width */
  container-type:inline-size;
}

.oem__lines{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}
.oem__orbit,
.oem__spoke,
.oem__web{
  fill:none;
  stroke:var(--charcoal-soft);
}
/* vector-effect does not inherit, so it has to sit on the shapes themselves —
   without it the 100-unit viewBox scales a 1px hairline up to roughly 9px. */
.oem__lines line,
.oem__lines path,
.oem__lines ellipse{
  vector-effect:non-scaling-stroke;
}
.oem__orbit{ stroke-width:1; stroke-opacity:.12; stroke-dasharray:2.5 4 }
.oem__spoke{ stroke-width:1; stroke-opacity:.20 }
.oem__web{   stroke-width:1; stroke-opacity:.20 }

/* the centre. Dominant, but not oversized: it reads as the thing everything
   else is arranged around rather than as a hub in a network diagram. */
.oem__core{
  position:absolute;
  left:50%; top:45%;
  width:27%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--ink-soft);
  color:var(--on-dark);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--sans);
  font-size:clamp(.58rem,2.15cqw,.78rem);
  font-weight:600;
  letter-spacing:.13em;
  line-height:1.5;
  text-transform:uppercase;
  padding:.4rem;
}
/* the small citron rule under the centre label, as on the approved concept */
.oem__core::after{
  content:"";
  width:1.55rem; height:2px;
  margin-top:.5rem;
  background:var(--citron);
}

/* the eight ecosystems. Each carries its own position and size so the
   composition stays deliberately uneven rather than mechanically radial. */
.oem__ring{ margin:0; padding:0; list-style:none }

.oem__node{
  position:absolute;
  left:var(--x); top:var(--y);
  width:var(--s);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--sans);
  font-size:clamp(.6rem,2.3cqw,.83rem);
  font-weight:500;
  line-height:1.3;
  letter-spacing:.005em;
  color:var(--ink-soft);
  padding:.5rem .55rem;
  background:var(--stone-deep);
}
.oem__node--dark{ background:var(--olive); color:var(--on-dark); font-weight:500 }
.oem__node--light{ background:var(--white); border:1px solid var(--line) }

.oem__node--media         { --x:42%; --y:17%; --s:18%   }
.oem__node--platforms     { --x:77%; --y:23%; --s:17%   }
.oem__node--thought       { --x:90%; --y:50%; --s:18%   }
.oem__node--speaking      { --x:76%; --y:76%; --s:16%   }
.oem__node--recognition   { --x:45%; --y:83%; --s:15.5% }
.oem__node--relationships { --x:18%; --y:74%; --s:19%   }
.oem__node--creators      { --x:9%;  --y:47%; --s:17%   }
.oem__node--podcasts      { --x:20%; --y:20%; --s:18%   }

/* --- MOBILE: the same idea, reorganised ---------------------------------
   Below 760px the circles would force the labels down to unreadable sizes,
   so the ecosystem is restated as the objective with the eight ecosystems
   gathered beneath it on a shared spine. Same content, same order, no
   horizontal scroll and nothing clipped. */
@media (max-width:760px){
  .oem{ margin-top:2rem }

  .oem__stage{ aspect-ratio:auto }

  .oem__lines{ display:none }

  .oem__core{
    position:static;
    transform:none;
    width:min(62%,220px);
    margin:0 auto;
    font-size:.72rem;
    padding:1rem;
  }

  .oem__ring{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    row-gap:.62rem;
    column-gap:1.45rem;
    margin-top:1.75rem;
  }
  /* the spine: one hairline running up to the objective, so the eight
     ecosystems still read as connected to it rather than as a plain list.
     It stops level with the last row rather than running past it. */
  .oem__ring::before{
    content:"";
    position:absolute;
    left:50%; top:-1.75rem; bottom:1.7rem;
    width:1px;
    background:var(--charcoal-soft);
    opacity:.3;
  }

  .oem__node{
    position:relative;
    left:auto; top:auto;
    transform:none;
    width:auto;
    aspect-ratio:auto;
    min-height:3.4rem;
    border-radius:999px;
    font-size:.775rem;
    padding:.7rem .85rem;
  }
  /* each ecosystem branches off the spine — the same relationship the
     circles carry on desktop, restated at this width */
  .oem__node::before{
    content:"";
    position:absolute;
    top:50%;
    width:.73rem; height:1px;
    background:var(--charcoal-soft);
    opacity:.3;
  }
  .oem__node:nth-child(odd)::before { right:-.73rem }
  .oem__node:nth-child(even)::before{ left:-.73rem }
}

@media (max-width:400px){
  .oem__ring{ row-gap:.5rem }
  .oem__node{ font-size:.735rem; padding:.65rem .6rem }
}