.art-head h1 { max-width: 30ch; }
.art-head .lede { max-width: 46rem; }
@media (min-width: 960px) { .art-head .shell { grid-template-columns: minmax(0, 1fr); } }
.art .fig-src, .art .fig-cap { max-width: 42rem; }
.art figcaption .fig-cap { margin-top: 1rem; }
.fig-tag { display: inline-block; font: 700 .8rem/1 var(--display); font-stretch: 90%; letter-spacing: .04em; text-transform: uppercase; background: var(--b-tint); color: #1d2a2b; padding: .32rem .5rem; margin-right: .55rem; vertical-align: .08em; }
.ar-bars { list-style: none !important; padding: 0 !important; margin: 0; display: grid; gap: 14px; }
.ar-bar { margin: 0 !important; display: grid; gap: .3rem; }
@media (min-width: 760px) { .ar-bar { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: 1rem; } }
.ar-bar-n { font: 600 .98rem/1.3 var(--display); font-stretch: 90%; color: var(--slate); }
.ar-bar-t { display: flex; align-items: center; gap: .6rem; min-height: 30px; }
.ar-bar-f { display: block; height: 26px; width: calc((100% - 4.5rem) * var(--w)); background: var(--slate); flex: none; }
.ar-bar-v { font-size: .98rem; font-weight: 600; white-space: nowrap; }
.ar-bar.is-now .ar-bar-f { background: var(--yellow); box-shadow: inset 0 0 0 2px #c99a26; }
.ar-bar.is-now .ar-bar-v { font-weight: 700; }
.ar-chain { list-style: none !important; padding: 0 !important; margin: 0; display: grid; gap: 34px; counter-reset: none; }
.ar-box { position: relative; margin: 0 !important; padding: 14px 16px 12px; border: 2px solid var(--slate); background: #fff; }
.ar-box p { margin: 0; font-size: .98rem; line-height: 1.45; }
.ar-box strong { display: block; font: 700 1.08rem/1.25 var(--display); font-stretch: 88%; color: var(--slate); margin-bottom: .25rem; }
.ar-box-n { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--slate); color: #fff; font: 700 .85rem/1 var(--text); margin-bottom: .5rem; }
.ar-box.is-you { background: var(--b-tint); }
.ar-box:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -27px; width: 2px; height: 20px; background: var(--slate); }
.ar-box:not(:last-child)::before { content: ""; position: absolute; left: calc(50% - 6px); bottom: -31px; border: 7px solid transparent; border-top: 8px solid var(--slate); border-bottom: 0; }
@media (min-width: 900px) {
.ar-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.ar-box:not(:last-child)::after { left: auto; right: -29px; bottom: auto; top: 50%; width: 22px; height: 2px; }
.ar-box:not(:last-child)::before { left: auto; right: -33px; bottom: auto; top: calc(50% - 6px); border: 7px solid transparent; border-left: 8px solid var(--slate); border-right: 0; }
}
.ar-track { position: relative; display: grid; grid-template-columns: 90fr 30fr 24fr; height: 22px; margin: 2.1rem 0 1.4rem; }
.ar-seg { display: block; height: 100%; }
.ar-track .ar-g { background: #4f9a6a; }
.ar-track .ar-a { background: #e8a53c; }
.ar-track .ar-r { background: #c25a5e; }
.ar-tick { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--ink); }
.ar-t0 { left: 0; }
.ar-t1 { left: calc(90 / 144 * 100% - 1.5px); }
.ar-t2 { left: calc(120 / 144 * 100% - 1.5px); }
.ar-exp { position: absolute; bottom: calc(100% + 8px); left: calc(90 / 144 * 100%); transform: translateX(-50%); font: 700 .92rem/1 var(--display); font-stretch: 88%; color: var(--ink); white-space: nowrap; }
.ar-tl { list-style: none !important; padding: 0 !important; margin: 0; display: grid; gap: 10px; }
.ar-tl > li { margin: 0 !important; padding: 12px 14px 12px 18px; background: #fff; border: 1.5px solid #c4cfcf; border-left: 8px solid var(--slate); }
.ar-tl p { margin: 0; font-size: .97rem; line-height: 1.45; }
.ar-tl strong { color: var(--slate); }
.ar-tl .ar-g { border-left-color: #4f9a6a; }
.ar-tl .ar-a { border-left-color: #e8a53c; background: #fff8e4; }
.ar-tl .ar-r { border-left-color: #c25a5e; background: #fdf1f1; }
.ar-tl .ar-x { display: none; }
@media (min-width: 900px) {
.ar-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ar-tl > li { border-left-width: 1.5px; border-top: 8px solid var(--slate); }
.ar-tl .ar-g { border-top-color: #4f9a6a; border-left-color: #c4cfcf; }
.ar-tl .ar-a { border-top-color: #e8a53c; border-left-color: #c4cfcf; }
.ar-tl .ar-r { border-top-color: #c25a5e; border-left-color: #c4cfcf; }
}
@media (max-width: 899px) {
.ar-tl .ar-x { display: block; padding: 0 0 0 18px; border: 0; background: none; }
.ar-tl .ar-x p { font: 700 .95rem/1.2 var(--display); font-stretch: 88%; }
}
.ar-photo { margin: 2.2rem 0 2.4rem; }
.ar-photo img { display: block; width: 100%; max-width: 42rem; height: auto; }
.ar-photo figcaption { font-size: .98rem; margin-top: .8rem; max-width: 42rem; }
.ar-banner { margin: 0 0 1.2rem; padding: .75rem 1rem; background: var(--b-tint); border-left: 6px solid var(--yellow); font: 700 1.05rem/1.35 var(--display); font-stretch: 90%; color: #1d2a2b; }
.ar-steps { list-style: none !important; padding: 0 !important; margin: 0; display: grid; gap: 34px; }
.ar-step { position: relative; margin: 0 !important; padding: 14px 16px 14px; border: 2px solid var(--slate); background: #fff; }
.ar-step > p { margin: 0; font-size: .98rem; line-height: 1.45; }
.ar-step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--slate); color: #fff; font: 700 .95rem/1 var(--text); margin-bottom: .55rem; }
.ar-step:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -27px; width: 2px; height: 20px; background: var(--slate); }
.ar-step:not(:last-child)::before { content: ""; position: absolute; left: calc(50% - 6px); bottom: -31px; border: 7px solid transparent; border-top: 8px solid var(--slate); border-bottom: 0; }
.ar-step > .ar-warn { margin-top: .85rem; padding: .6rem .75rem; background: var(--p-tint); border-left: 5px solid #c25a5e; font-weight: 600; font-size: .93rem; }
@media (min-width: 900px) {
.ar-steps { grid-template-columns: 1.5fr 1fr 1fr; align-items: start; }
.ar-step:not(:last-child)::after { left: auto; right: -29px; bottom: auto; top: 28px; width: 22px; height: 2px; }
.ar-step:not(:last-child)::before { left: auto; right: -33px; bottom: auto; top: 23px; border: 7px solid transparent; border-left: 8px solid var(--slate); border-right: 0; }
}
.ar-num .st-val { font-weight: 600; }