/* goals: stacked accordion index of the five victory goals */
#goals { padding-top: var(--s8); }
.gl__intro { margin-bottom: var(--s8); }
.gl { border-bottom: 1px solid var(--line); }
.gl__i { position: relative; border-top: 1px solid var(--line); }
.gl__h { margin: 0; }
.gl__b { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; width: 100%; text-align: left; padding-block: var(--s5); }
.gl__no {
  grid-column: 1 / span 2; --p: 1; font-family: var(--f-display); font-weight: 900; line-height: .9; letter-spacing: .02em; font-size: clamp(44px, 7vw, 120px);
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  background: linear-gradient(to top, var(--gold) calc(var(--p) * 100%), transparent calc(var(--p) * 100%)); -webkit-background-clip: text; background-clip: text;
}
.gl__nm { grid-column: 3 / span 6; font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 2.9vw, 50px); line-height: 1.05; transition: color .4s, transform .6s var(--ease); }
.gl__tg { grid-column: 9 / span 3; font-family: var(--f-label); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.gl__pm { grid-column: 12; justify-self: end; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--gold); transition: background-color .35s, color .35s; }
.gl__b:hover .gl__pm, .gl__i.is-open .gl__pm { background: var(--gold); color: var(--bg); }
.gl__b:hover .gl__nm, .gl__i.is-open .gl__nm { color: var(--gold-hi); }
.gl__i.is-open .gl__nm { transform: translateX(8px); }

.gl__p { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .75s var(--ease); }
.geo-on .gl__i:not(.is-open) .gl__p { grid-template-rows: 0fr; }
.gl__pin { min-height: 0; overflow: hidden; }
.gl__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s6); padding-bottom: var(--s7); }
.gl__tx { grid-column: 3 / span 4; display: grid; align-content: start; gap: var(--s5); }
.gl__fig { grid-column: 7 / span 6; margin: 0; }
.gl__d { font-size: var(--t-lead); line-height: 1.3; color: var(--text); }
.gl__s { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.gl__s div { border-top: 1px solid var(--line); padding-top: var(--s2); }
.gl__s dt { font-family: var(--f-label); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.gl__s dd { font-family: var(--f-label); font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hi); margin-top: var(--s1); }
.gl__n { color: var(--muted); font-size: 17px; }
.gl__svg { border: 1px solid var(--line-soft); background: var(--bg); }
.gl__svg svg { width: 100%; height: auto; }
.gl__fig figcaption { margin-top: var(--s3); }
.gl__foot { margin-top: var(--s6); }
.geo-on .gl__tx > *, .geo-on .gl__fig { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.geo-on .gl__i.is-open .gl__tx > *, .geo-on .gl__i.is-open .gl__fig { opacity: 1; transform: none; transition-delay: .25s; }

@media (max-width: 899px) {
  .gl__b { grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-rows: auto auto; row-gap: var(--s2); padding-block: var(--s4); column-gap: var(--s3); }
  .gl__nm { grid-column: 1 / span 2; grid-row: 1; font-size: clamp(17px, 5.6vw, 32px); white-space: nowrap; }
  .gl__i.is-open .gl__nm { transform: none; }
  .gl__no { grid-column: 1; grid-row: 2; font-size: 20px; line-height: 1; letter-spacing: .04em; }
  .gl__tg { grid-column: 2; grid-row: 2; font-size: 12px; }
  .gl__pm { grid-column: 3; grid-row: 1 / span 2; width: 36px; height: 36px; }
  .gl__tx, .gl__fig { grid-column: 1 / -1; }
  .gl__intro .lede { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .gl__b { grid-template-columns: 96px minmax(0, 1fr) 40px; column-gap: var(--s4); }
  .gl__nm { grid-column: 2; font-size: clamp(26px, 4.6vw, 38px); }
  .gl__no { grid-column: 1; grid-row: 1 / span 2; font-size: 52px; line-height: .9; }
  .gl__tg { grid-column: 2; font-size: 13px; }
  .gl__tx { grid-column: 2 / -1; } .gl__fig { grid-column: 2 / -1; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .gl__nm { grid-column: 3 / span 7; font-size: clamp(24px, 2.9vw, 50px); }
  .gl__tg { grid-column: 3 / span 7; grid-row: 2; margin-top: var(--s1); }
  .gl__b { row-gap: 0; }
  .gl__no { grid-row: 1 / span 2; }
  .gl__pm { grid-row: 1 / span 2; }
}

/* diagram ink */
.gl__svg .tx { font-family: var(--f-label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; fill: var(--text); }
@media (min-width: 900px) { .gl__svg .tx { font-size: 9px; } }
.gl__svg .tx.dim { fill: var(--dim); }
.gl__svg .ax { stroke: var(--line); stroke-width: 1; fill: none; }
.hg__c { fill: none; stroke: var(--line); stroke-width: 1; }
.hg__c.held { fill: var(--gold); stroke: var(--gold); }
.hg__h { fill: var(--gold); opacity: .7; }
.hg__s { fill: var(--ink2); stroke: var(--line); } .hg__s.on { fill: var(--gold); stroke: var(--gold); }
.hg__t { stroke: var(--gold-hi); stroke-width: 1.5; fill: none; }
.hg__mo rect { fill: none; stroke: var(--gold); stroke-width: 1; }
@media (prefers-reduced-motion: reduce) { .hg__mo rect { fill: var(--gold); } }
.ec__r { fill: none; stroke: var(--dim); stroke-width: 1.2; }
.ec__p { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.ec__b path { stroke: var(--gold-hi); stroke-width: 1.2; fill: none; }
.ec__e rect { fill: var(--gold-hi); }
.bc__r { fill: none; stroke: var(--line); stroke-width: 1; }
.bc__l { stroke: var(--gold); stroke-width: 1; fill: none; opacity: .6; }
.bc__n { fill: var(--ink2); stroke: var(--gold); stroke-width: 1.5; } .bc__n.lead { fill: var(--gold); }
.gl__svg .bar { fill: var(--ink2); stroke: var(--line); }
.gl__svg .fill { fill: var(--gold); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--w)); }
.ru__u { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 5 4; }
.ru__a polygon, .ru__b polygon { fill: rgba(217, 179, 108, .28); stroke: var(--gold); stroke-width: 1.5; }
.ru__f polygon { fill: rgba(217, 179, 108, .05); stroke: var(--dim); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ru__flag path { stroke: var(--gold-hi); stroke-width: 1.5; fill: none; }
.pc__t { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 4 4; fill: none; opacity: .7; }
.pc__s { stroke: var(--text); stroke-width: 2; fill: none; }
.pc__g { stroke: var(--gold); stroke-width: 2.5; fill: none; }
.pc__e rect { fill: var(--gold-hi); }
.pc__y rect { fill: var(--gold); }

/* open-state animations (closed rows are collapsed, so these replay on every open) */
@media (prefers-reduced-motion: no-preference) {
  .gl__i.is-open .hg__c.held, .gl__i.is-open .hg__h { animation: glIn .5s both; animation-delay: calc(var(--i) * 35ms + .4s); }
  .gl__i.is-open .hg__s.on { animation: glIn .4s both; animation-delay: calc(var(--i) * 60ms + .6s); }
  .gl__i.is-open .hg__mo rect { animation: glFill .4s both; animation-delay: calc(var(--i) * 220ms + 1.6s); }
  .gl__i.is-open .ec__r, .gl__i.is-open .ec__p { stroke-dasharray: 1; stroke-dashoffset: 1; animation: glDraw 1.6s var(--ease-io) both; animation-delay: calc(var(--k, 4) * 120ms + .4s); }
  .gl__i.is-open .ec__p { animation-duration: 2.4s; animation-delay: .6s; }
  .gl__i.is-open .ec__b, .gl__i.is-open .ec__e, .gl__i.is-open .pc__e { animation: glIn .6s both; animation-delay: 2.6s; }
  .gl__i.is-open .bc__n:not(.lead), .gl__i.is-open .bc__l { animation: glIn .4s both; animation-delay: calc(var(--i) * 110ms + .4s); }
  .gl__i.is-open .gl__svg .fill { animation: glBar 1.6s var(--ease-io) both; animation-delay: 1.6s; }
  .gl__i.is-open .ru__a, .gl__i.is-open .ru__b { animation: glSlideA 1.6s var(--ease-io) .8s both; }
  .gl__i.is-open .ru__b { animation-name: glSlideB; }
  .gl__i.is-open .ru__f { animation: glTake 1.6s var(--ease-io) .8s both; }
  .gl__i.is-open .ru__u, .gl__i.is-open .ru__flag { animation: glIn .8s both; animation-delay: 2.2s; }
  .gl__i.is-open .pc__s, .gl__i.is-open .pc__g { stroke-dasharray: 1; stroke-dashoffset: 1; animation: glDraw 2s var(--ease-io) .5s both; }
  .gl__i.is-open .pc__y rect { animation: glIn .3s both; animation-delay: calc(var(--i) * 140ms + .6s); }
}
.ec__r, .ec__p, .pc__s, .pc__g { }
@keyframes glIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes glFill { from { fill: transparent; } to { fill: var(--gold); } }
@keyframes glDraw { to { stroke-dashoffset: 0; } }
@keyframes glBar { from { transform: scaleX(0); } }
@keyframes glSlideA { from { transform: translateX(-10px); } to { transform: none; } }
@keyframes glSlideB { from { transform: translateX(10px); } to { transform: none; } }
@keyframes glTake { to { fill-opacity: 1; } }
.gl__i.is-open .ru__f polygon { animation: glGold 1.6s var(--ease-io) 1s both; }
@keyframes glGold { to { fill: rgba(217,179,108,.28); stroke: #d9b36c; stroke-dasharray: none; } }