/* Hallmark · macrostructure: Long Document · tone: austere technical · anchor hue: signal orange · contrast: pass (40–41) */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */

.route{
  padding:32px 0 64px;
  border-top:0;
  background:var(--color-paper);
}

.atlas{display:grid;width:min(1040px,calc(100% - 44px));margin:0 auto;padding:0;list-style:none}
.atlas-stage{position:relative;display:grid;grid-template-columns:365px minmax(0,1fr);align-items:center;min-height:280px;border-top:2px solid var(--color-ink);transition:background-color var(--dur-short) var(--ease-out)}
.atlas-stage:last-child{border-bottom:2px solid var(--color-ink)}
.atlas-stage:nth-child(even){grid-template-columns:minmax(0,1fr) 365px}
.atlas-stage:nth-child(even) .atlas-stage__media{order:2;justify-self:end}
.atlas-stage.is-visible{background:var(--color-paper-2)}
.atlas-stage__media{width:365px;min-height:0;aspect-ratio:16/9;margin:0;overflow:hidden;background:var(--color-ink)}
.atlas-stage__media img{display:block;width:100%;height:100%;object-fit:cover}
.atlas-stage__copy{display:grid;grid-template-columns:68px minmax(0,1fr);align-content:center;gap:14px 18px;padding:24px 28px;background:transparent}
.atlas-stage__number{grid-column:1;grid-row:1;margin:0;color:var(--color-accent);font-size:36px;font-weight:700;line-height:.86}
.atlas-stage__roles{display:grid;grid-column:2;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0}
.atlas-stage__role{display:grid;align-content:start;gap:9px;min-width:0;margin:0;padding-right:20px}
.atlas-stage__role + .atlas-stage__role{padding-right:0;padding-left:20px;border-left:1px solid var(--color-rule)}
.atlas-stage__role-label{margin:0;font-size:13px;font-weight:700;line-height:1.2}
.atlas-stage__role-title{min-width:0;margin:0;font-family:var(--font-display);font-size:var(--type-h3);line-height:1.08;overflow-wrap:anywhere}
.atlas-stage__role-copy{margin:0;color:var(--color-muted);font-size:14px;line-height:1.42}
.atlas-stage__result{display:grid;grid-column:1/-1;grid-template-columns:82px minmax(0,1fr);gap:12px;margin:0;padding:12px 0 0;border-top:1px solid var(--color-rule);background:transparent;font-size:14px;line-height:1.42}
.atlas-stage__result strong{text-transform:uppercase}
.atlas-stage__actions{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px}
.atlas-stage__resource{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:9px 0;border-bottom:1px solid var(--color-rule);color:var(--color-ink);font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;outline:2px solid transparent;outline-offset:3px}
.atlas-stage__resource:hover{border-color:var(--color-accent);color:var(--color-accent)}
.atlas-stage__actions a:focus-visible{outline-color:var(--color-focus)}
.atlas-stage__actions a:active{transform:translateY(1px)}

.route-project-links{display:flex;justify-content:center;margin-top:32px;padding-top:22px;border-top:1px solid var(--color-rule)}
.route-project-links__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.route-project-links a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border:1px solid var(--color-ink);color:var(--color-ink);font-size:16px;font-weight:500;line-height:1.2;white-space:nowrap;outline:2px solid transparent;outline-offset:3px}
.route-project-links a:focus-visible{outline-color:var(--color-focus)}
.route-project-links a:active{transform:translateY(1px)}
.route-project-links__ready{border-color:var(--color-accent)!important;background:var(--color-accent);color:var(--color-accent-ink)!important}
.route-project-links__ready:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)!important}
.route-project-links__individual:hover{border-color:var(--color-accent);color:var(--color-accent)}

@media(max-width:899px){.atlas-stage,.atlas-stage:nth-child(even){grid-template-columns:1fr;min-height:0;padding-block:0}.atlas-stage:nth-child(even) .atlas-stage__media{order:0}.atlas-stage__media{width:100%;min-height:0;aspect-ratio:16/9}.atlas-stage__copy{grid-template-columns:1fr;padding:22px 18px}.atlas-stage__number{grid-column:1;grid-row:1;font-size:30px}.atlas-stage__roles{grid-column:1;grid-row:2;grid-template-columns:1fr}.atlas-stage__role{gap:8px;padding:14px 0}.atlas-stage__role + .atlas-stage__role{padding-left:0;border-left:0;border-top:1px solid var(--color-rule)}.atlas-stage__role-copy,.atlas-stage__result{font-size:13px}.atlas-stage__result{grid-template-columns:76px minmax(0,1fr)}}
.route h1{
  font-family:var(--font-display);
  font-size:var(--type-h1);
  line-height:.98;
  letter-spacing:-.045em;
}
.route h1{min-width:0;overflow-wrap:anywhere}
.route-title-main{display:block}
.route-title-sub{
  display:block;
  max-width:22ch;
  margin-top:10px;
  font-size:.54em;
  line-height:1.12;
  letter-spacing:0;
}
.route-intro{
  display:grid;
  grid-template-columns:auto minmax(240px,34ch);
  gap:24px;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:40px;
}
.route-intro-head{
  display:grid;
  grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);
  gap:54px;
  align-items:end;
}
.route-lead{
  justify-self:end;
  max-width:34ch;
  padding-top:0;
  color:var(--color-muted);
  font-size:var(--type-body-lg);
  line-height:1.5;
}
@media(max-width:1024px){
  .route{padding-block:32px 64px}
  .route-intro{grid-template-columns:auto minmax(240px,38ch);gap:20px;margin-bottom:36px}
  .route-intro-head{grid-template-columns:1fr;gap:22px}
  .route-lead{justify-self:start}
}

@media(max-width:680px){
  .route{padding-block:32px 52px}
  .route-intro{grid-template-columns:1fr;gap:10px}
  .route h1{font-size:var(--type-h1);line-height:1.02}
  .route-lead{justify-self:start;max-width:34ch}
  .atlas-stage__actions{display:grid;width:100%}
  .atlas-stage__resource{width:fit-content;justify-self:start}
  .route-project-links{align-items:stretch;margin-top:24px;padding-top:18px}
  .route-project-links__actions{width:100%;flex-direction:column;gap:8px}
  .route-project-links a{width:100%;padding-inline:14px}
}

@media(max-width:480px){
  .route h1{font-size:clamp(28px,9vw,36px)}
}