/* Hallmark · macrostructure: route-led editorial figure · component: route art · genre: modern-minimal · theme: existing Rely system · design-system: DESIGN.md · designed-as-app
 * audience: healthcare operations buyers · use: five-second route explanation · tone: precise editorial · palette: existing Rely ink, cobalt, clay, sage
 * variants: portfolio / handoff / branch / gates / layers / evidence · states: static · responsive · reduced-motion
 * pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (46–50) · slop: pass (51–60) · mobile: pass (36, 59, 61–69)
 */
.routeart,.routeart-figure,.routeart-frame{min-width:0}
.routeart{--routeart-ground:color-mix(in srgb,var(--paper) 82%,var(--clay-tint));--routeart-bleed:calc(var(--gutter) / 2);overflow:clip;padding-block:clamp(2rem,3.5vw,3.75rem);background:var(--routeart-ground)}
.routeart-figure{margin:0}
.routeart-head{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin-bottom:clamp(.75rem,1.5vw,1.25rem)}
.routeart-head h2{max-width:16ch;margin:0;font-family:var(--sans);font-size:clamp(2rem,3.5vw,3.6rem);font-weight:600;line-height:.98;letter-spacing:-.055em;overflow-wrap:anywhere}
.routeart-head p{max-width:62ch;margin:0;color:var(--ink-2);font-size:1rem;line-height:1.55}
.routeart-frame{overflow:clip;margin-inline:calc(var(--routeart-bleed) * -1);background:var(--routeart-ground)}
.routeart-frame picture{display:block}
.routeart-image{display:block;width:100%;height:auto}
.routeart-labels{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:.35rem 0 0;padding:0;list-style:none;border-top:1.5px solid var(--ink)}
.routeart-labels li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.5rem;align-items:start;padding:.75rem 0;border-bottom:1px solid var(--line)}
.routeart-labels span{padding-top:.125rem;color:var(--brand);font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.08em}
.routeart-labels strong{font-family:var(--sans);font-size:.86rem;font-weight:700;line-height:1.35}
.routeart-boundary{max-width:72ch;margin:1rem 0 0;padding-inline-start:1rem;border-inline-start:4px solid var(--clay);color:var(--ink-2);font-size:.8125rem;line-height:1.5}

@media(min-width:40rem){
  .routeart-head{grid-template-columns:minmax(0,1fr) minmax(18rem,.72fr);gap:clamp(1rem,3vw,3rem);align-items:end}
  .routeart-labels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .routeart-labels li{padding:.85rem .8rem .85rem 0}
  .routeart-labels li:not(:nth-child(3n + 1)){padding-inline-start:.8rem;border-inline-start:1px solid var(--line)}
}

@media(min-width:64rem){
  .routeart-label-count-5 .routeart-labels{grid-template-columns:repeat(5,minmax(0,1fr))}
  .routeart-label-count-5 .routeart-labels li:not(:nth-child(3n + 1)){padding-inline-start:0;border-inline-start:0}
  .routeart-label-count-5 .routeart-labels li:not(:first-child){padding-inline-start:.8rem;border-inline-start:1px solid var(--line)}
}

@media(max-width:39.99rem){
  .routeart-frame{margin-inline:calc(var(--routeart-bleed) / -2)}
  .routeart-post-discharge .routeart-frame{max-width:24rem;margin-inline:auto}
}

@media print{
  .routeart{break-inside:avoid;background:var(--paper)}
  .routeart-image{max-height:6.5in;object-fit:contain}
}