/* /brand-mark: the anatomy of the MCG Brand Mark.
   The diagram is the real mark (mcg-mark-white.png). Each element is lit by
   masking that same image, so the mark is never redrawn. brand-mark.js moves
   data-active between figure, star, triangle, and ring as the reader scrolls. */

.bm{padding:clamp(56px, 8vw, 110px) 0;}
.bm-grid{display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:clamp(32px, 6vw, 96px); align-items:start;}
.bm-stage{position:sticky; top:100px;}
.bm-figure{margin:0; position:relative;}
.bm-svg{display:block; width:100%; height:auto; max-height:calc(100vh - 190px); overflow:visible;}
.bm-svg text{font-family:var(--display); font-weight:700; letter-spacing:.2em; text-transform:uppercase; fill:var(--platinum);}

/* layers */
.bm-base{transition:opacity .6s var(--ease);}
.bm-lit,.bm-label{opacity:0; transition:opacity .6s var(--ease);}
.bm[data-active] .bm-base{opacity:.13;}
.bm[data-active="figure"] .bm-l-figure,
.bm[data-active="star"] .bm-l-star,
.bm[data-active="triangle"] .bm-l-triangle,
.bm[data-active="ring"] .bm-l-ring{opacity:1;}
.bm-l-star .bm-star-fill{fill:#fff;}
.bm-outline{fill:none; stroke:var(--platinum); stroke-width:3; stroke-dasharray:14 12;}
.bm-tier-line{stroke:var(--ink); stroke-width:7;}
.bm-tier-n{font-size:30px; letter-spacing:0 !important;}
.bm-leader{stroke:var(--steel); stroke-width:2.5;}
.bm-band-img{transition:opacity .35s var(--ease);}
.bm-tri-img{transition:opacity .35s var(--ease);}
.bm[data-tier] .bm-tri-img{opacity:.35;}
.bm:not([data-tier]) .bm-band-img{opacity:0;}
.bm-break{animation:bm-pulse 2.4s var(--ease) infinite;}
@keyframes bm-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* pins */
.bm-pin{cursor:pointer;}
.bm-pin circle{fill:var(--ink); stroke:var(--platinum); stroke-width:3; transition:fill .3s var(--ease), stroke .3s var(--ease);}
.bm-pin text{font-size:24px; letter-spacing:0 !important; fill:var(--white); transition:fill .3s var(--ease);}
.bm-pin line{stroke:var(--platinum); stroke-width:2; stroke-dasharray:4 6; transition:opacity .3s var(--ease);}
.bm[data-active] .bm-pin{opacity:.35; transition:opacity .4s var(--ease);}
.bm-pin .bm-anchor{fill:var(--platinum); stroke:none; transition:opacity .3s var(--ease);}
.bm[data-active] .bm-pin line,.bm[data-active] .bm-pin .bm-anchor{opacity:0;}
.bm[data-active="figure"] .bm-pin[data-bm="figure"],
.bm[data-active="star"] .bm-pin[data-bm="star"],
.bm[data-active="triangle"] .bm-pin[data-bm="triangle"],
.bm[data-active="ring"] .bm-pin[data-bm="ring"]{opacity:1;}
.bm[data-active="figure"] .bm-pin[data-bm="figure"] circle,
.bm[data-active="star"] .bm-pin[data-bm="star"] circle,
.bm[data-active="triangle"] .bm-pin[data-bm="triangle"] circle,
.bm[data-active="ring"] .bm-pin[data-bm="ring"] circle{fill:var(--white); stroke:var(--white);}
.bm[data-active="figure"] .bm-pin[data-bm="figure"] text,
.bm[data-active="star"] .bm-pin[data-bm="star"] text,
.bm[data-active="triangle"] .bm-pin[data-bm="triangle"] text,
.bm[data-active="ring"] .bm-pin[data-bm="ring"] text{fill:var(--ink);}
.bm-pin:hover circle{stroke:var(--white);}

/* element chips under the diagram */
.bm-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; justify-content:center;}
.bm-chip{all:unset; box-sizing:border-box; cursor:pointer; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); padding:10px 14px; border:1px solid var(--rule-dark); min-height:40px; display:inline-flex; align-items:center; gap:8px;}
.bm-chip span{color:var(--graphite);}
.bm-chip:hover{color:var(--white); border-color:var(--steel);}
.bm-chip:focus-visible{outline:2px solid var(--platinum); outline-offset:2px;}
.bm-chip[aria-pressed="true"]{color:var(--ink); background:var(--white); border-color:var(--white);}
.bm-chip[aria-pressed="true"] span{color:var(--slate);}
.bm-status{margin-top:12px; text-align:center; font-size:12.5px; color:var(--graphite); min-height:1.5em;}

/* the reading column */
.bm-steps{list-style:none; margin:0; padding:0;}
.bm-step{padding:clamp(30px, 4vw, 52px) 0; border-top:1px solid var(--rule-dark); transition:opacity .5s var(--ease);}
.bm-step:first-child{border-top:0; padding-top:0;}
.bm-step{scroll-margin-top:110px;}
.js .bm-live .bm-step{min-height:62vh; display:flex; flex-direction:column; justify-content:center;}
.js .bm-live .bm-step:first-child{min-height:48vh; justify-content:flex-start;}
.js .bm-live .bm-step:not(.is-current){opacity:.9;}
.bm-step .step-n{margin-bottom:14px;}
.bm-step h3{margin:0 0 14px;}
.bm-step h2{margin-bottom:22px;}
.bm-step p + p{margin-top:14px;}
.bm-show{all:unset; cursor:pointer; margin-top:18px; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--platinum); border-bottom:1px solid var(--rule-dark); padding-bottom:4px;}
.bm-show:hover{color:var(--white); border-color:var(--platinum);}
.bm-show:focus-visible{outline:2px solid var(--platinum); outline-offset:4px;}
.bm-list{list-style:none; margin:22px 0 0; padding:0; counter-reset:bm;}
.bm-list li{counter-increment:bm; display:grid; grid-template-columns:34px 1fr; gap:4px 12px; padding:12px 0; border-top:1px solid var(--rule-dark);}
.bm-list li::before{content:counter(bm, decimal-leading-zero); font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--graphite); padding-top:4px;}
.bm-list b{display:block; color:var(--white); font-weight:600; font-size:15px;}
.bm-list span{display:block; color:var(--steel); font-size:14px; line-height:1.55; grid-column:2;}
.bm-tiers li{cursor:default; transition:background .25s var(--ease);}
.bm-tiers li:focus-visible{outline:2px solid var(--platinum); outline-offset:-2px;}
.bm-tiers li.is-on{background:var(--panel);}
.bm-tiers li.is-on::before{color:var(--white);}

/* usage */
.bm-sizes{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1px; background:var(--rule-light); border:1px solid var(--rule-light); margin-bottom:clamp(40px, 5vw, 64px);}
.bm-size{background:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:18px; padding:clamp(24px, 3vw, 40px) 16px 20px; min-height:250px;}
.bm-size.on-ink{background:var(--ink);}
.bm-size img{display:block; height:auto;}
.bm-size span{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-label); text-align:center;}
.bm-size.on-ink span{color:var(--steel);}
.bm-rules{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 clamp(28px, 4vw, 64px);}
.bm-rules li{padding:22px 0; border-top:1px solid var(--rule-light);}
.bm-rules h3{font-size:17px; margin:0 0 8px;}
.bm-rules p{margin:0; font-size:15px;}

@media (max-width:900px){
  .bm-grid{grid-template-columns:1fr; gap:0;}
  .bm-stage{top:76px; z-index:5; background:var(--ink); padding:12px 0 10px; margin:0 calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); border-bottom:1px solid var(--rule-dark);}
  .bm-svg{max-height:34vh; margin:0 auto;}
  .bm-chips{margin-top:10px; gap:6px;}
  .bm-chip{padding:8px 10px; min-height:36px; font-size:9.5px; letter-spacing:.14em;}
  .bm-chip span{display:none;}
  .bm-status{display:none;}
  .bm-steps{padding-top:28px;}
  .bm-step{scroll-margin-top:calc(76px + 34vh + 90px);}
  .js .bm-live .bm-step{min-height:58vh;}
  .js .bm-live .bm-step:first-child{min-height:0;}
  .bm-sizes{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .bm-rules{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .bm-base,.bm-lit,.bm-label,.bm-pin,.bm-step,.bm-band-img,.bm-tri-img{transition:none !important;}
  .bm-break{animation:none;}
}
@media print{
  .bm-stage{position:static;}
  .bm-chips,.bm-status,.bm-show{display:none;}
  .bm-step{min-height:0 !important; opacity:1 !important;}
}