/* curriculum.html 전용 스타일 — 인라인 <style> 에서 옮겼다(라이트 테마 P3-C). 공용 크롬은 hub.css·nav.css. */
:root{ --r:18px } /* 페이지 레이아웃 토큰 */

.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:var(--glow-opacity);mix-blend-mode:var(--glow-blend)}
.blob.a{width:540px;height:540px;background:radial-gradient(circle,var(--amber),transparent 65%);top:-220px;left:-120px;animation:d1 22s ease-in-out infinite alternate}
.blob.b{width:480px;height:480px;background:radial-gradient(circle,var(--glow1),transparent 60%);top:42%;right:-160px;animation:d2 26s ease-in-out infinite alternate}
.blob.c{width:440px;height:440px;background:radial-gradient(circle,var(--glow3),transparent 60%);bottom:-220px;left:30%;opacity:calc(var(--glow-opacity)*.8);animation:d3 24s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(60px,70px) scale(1.1)}}
@keyframes d2{to{transform:translate(-60px,-40px) scale(1.12)}}
@keyframes d3{to{transform:translate(50px,-50px) scale(1.08)}}


/* 페이지 헤드 */
.phead{padding:62px 0 12px;max-width:680px;position:relative}

.phead h1{font-size:clamp(40px,6vw,74px);font-weight:700;font-family:"Space Grotesk";letter-spacing:-.03em;line-height:1}
.phead h1 .it{font-family:"Instrument Serif";font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--amber),var(--ember),var(--crim));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.16em}
.phead .section-hero-copy>p{color:var(--txt-dim);font-size:16px;line-height:1.75;margin-top:18px}
.phead .section-hero-copy>p strong{color:var(--amber);font-weight:600}
.res:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.route-items a,.ttab,.res,.rarr{transition:none}}

/* 학습 트랙 탭 (패널은 .tpanel — .pathviz .track(SVG)과 충돌 방지) */
.tracktabs{display:flex;gap:10px;flex-wrap:wrap;margin:40px auto 42px;justify-content:center}
.ttab{min-height:44px;min-width:168px;display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:11px 22px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line);color:var(--txt-dim);font-size:14px;font-family:inherit;cursor:pointer;backdrop-filter:blur(14px);transition:color .2s,border-color .2s}
.ttab:hover{color:var(--txt)}
.ttab.on{color:var(--txt);border-color:var(--ember);box-shadow:0 0 18px rgba(var(--ember-rgb),.25)}
.ttab-name{font-weight:600}
.ttab-when{font-size:11.5px;color:var(--txt-dim)}
.ttab.on .ttab-when{color:var(--amber)}
.ttab:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.tpanel{overflow-x:clip;scroll-margin-top:96px}
.tpanel .tagline{text-align:center;color:var(--txt-dim);font-size:14.5px;line-height:1.7;margin:0 0 34px}
.tpanel.hide{display:none}

/* ===== 히어로 노선 그림(2026-10-26, BUILD:ROUTE) — 공통 출발 → 목표별 경로 → 분야별 심화 =====
 * 사진 위 다크 섬이라 반투명 바탕 하나에 세 정거장을 나란히 두고, 위 가장자리 한 줄(앰버 → 불씨 → 진홍)이
 * 아래 로드맵의 세로선과 같은 색 순서로 정거장을 잇는다. 정거장 점·번호 색은 단계 점(.stage--*>.node)과 같다. */
.route{max-width:1080px;margin-top:6px}
.route-list{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border:1px solid var(--glass-line);border-radius:18px;background:rgba(var(--bg-rgb),.8);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--hilite)}
.route-list::before{content:"";position:absolute;left:24px;right:24px;top:-2px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--ember) 50%,var(--crim))}
.route-stop{position:relative;min-width:0;padding:26px 24px 22px}
.route-stop+.route-stop{border-left:1px solid var(--glass-line)}
.route-stop::before{content:"";position:absolute;left:24px;top:-6px;width:11px;height:11px;border-radius:50%;background:var(--route-c);box-shadow:0 0 0 3px var(--bg),0 0 14px var(--route-c)}
.route-stop--start{--route-c:var(--amber)}
.route-stop--path{--route-c:var(--ember)}
.route-stop--deep{--route-c:var(--crim);--route-t:var(--diff-advanced)} /* --crim 은 장식 전용(다크 대비 4.40:1) — 글자는 --diff-advanced */
.route-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 12px;color:var(--txt);text-decoration:none}
.route-no{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font:700 17px/1 "Space Grotesk",var(--font-sans);color:rgb(var(--white-rgb))}
.route-stop--start .route-no{background:linear-gradient(135deg,var(--amber),var(--ember))}
.route-stop--path .route-no{background:linear-gradient(135deg,var(--ember),var(--crim))}
.route-stop--deep .route-no{background:linear-gradient(135deg,var(--crim),var(--grad-wine))}
.route-name{font:600 19px/1.25 "Space Grotesk",var(--font-sans);letter-spacing:-.01em}
.route-when{justify-self:start;font-size:12.5px;line-height:1.4;color:var(--txt-dim)}
.route-stop--start .route-when{padding:3px 9px;border-radius:100px;background:rgba(var(--amber-rgb),.16);color:var(--amber);font-weight:600}
.route-head:hover .route-name{color:var(--route-t,var(--route-c))}
.route-count{margin:14px 0 8px;font-size:12.5px;color:var(--txt-dim)}
.route-count b{margin-right:1px;font:600 16px/1 "Space Grotesk",var(--font-sans);color:var(--route-t,var(--route-c))}
.route-items{display:grid;gap:1px;margin:0;padding:0;list-style:none}
.route-items a{display:flex;align-items:center;gap:9px;min-height:30px;padding:3px 0;font-size:13px;line-height:1.45;color:var(--read);text-decoration:none;word-break:keep-all;overflow-wrap:anywhere}
.route-items a::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--route-c);opacity:.75}
.route-items a:hover{color:var(--txt)}
.route-head:focus-visible,.route-items a:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
@media(max-width:760px){
  .route-list{grid-template-columns:1fr}
  .route-list::before{left:-2px;right:auto;top:24px;bottom:24px;width:3px;height:auto;background:linear-gradient(180deg,var(--amber),var(--ember) 50%,var(--crim))}
  .route-stop{padding:20px 18px 18px 26px}
  .route-stop+.route-stop{border-left:0;border-top:1px solid var(--glass-line)}
  .route-stop::before{left:-6px;top:33px}
}

/* ===== 이 로드맵 쓰는 법(2026-10-26) — 한 단계 진행 순서와 세 학습 자료의 쓰임 =====
 * 순서의 칸 이름은 아래 단계 카드의 칸 이름과 같고, 세 자료의 색은 단계 안 자료 줄의 아이콘 색과 같다(안내서 불씨·코스 초록·사이트 자료 파랑). */
.howto{margin-top:58px;scroll-margin-top:96px}
.howto-steps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 56px;align-items:start}
.howto h2{font:600 clamp(24px,3vw,30px)/1.25 "Space Grotesk",var(--font-sans);letter-spacing:-.02em;word-break:keep-all}
.howto-intro>p{margin-top:14px;color:var(--txt-dim);font-size:14.5px;line-height:1.75;word-break:keep-all}
.howto-intro .howto-stuck{margin-top:18px;padding:14px 16px;border-left:3px solid var(--blue);border-radius:0 12px 12px 0;background:rgba(var(--blue-rgb),.08);color:var(--read);font-size:13.5px}
.howto-stuck strong{margin-right:6px;color:var(--txt)}
.howto-stuck a{color:var(--ember);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.howto-list{counter-reset:step;margin:0;padding:0;list-style:none;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card)}
.howto-list li{counter-increment:step;position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:18px 22px}
.howto-list li+li{border-top:1px solid var(--glass-line)}
.howto-list li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border:1.5px solid rgba(var(--ember-rgb),.55);border-radius:50%;font:600 15px/1 "Space Grotesk",var(--font-sans);color:var(--ember)}
.howto-list b{font-size:15px;font-weight:600;color:var(--txt)}
.howto-list span{font-size:13.5px;line-height:1.65;color:var(--txt-dim);word-break:keep-all;overflow-wrap:anywhere}

.howto-res{margin-top:52px}
.howto-res h2{margin-bottom:18px}
.res-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,auto);border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card);overflow:hidden}
.rc{--rc:var(--ember);--rc-rgb:var(--ember-rgb);display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;min-width:0;padding:24px 24px 20px;background:linear-gradient(180deg,rgba(var(--rc-rgb),.07),transparent 140px)}
.rc+.rc{border-left:1px solid var(--glass-line)}
.rc--course{--rc:var(--green);--rc-rgb:var(--green-rgb)}
.rc--term{--rc:var(--blue);--rc-rgb:var(--blue-rgb)}
.rc h3{display:flex;align-items:center;gap:11px;font:600 17px/1.3 "Space Grotesk",var(--font-sans);word-break:keep-all}
.rc-ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:rgba(var(--rc-rgb),.14);color:var(--rc)}
.rc-count{margin:12px 0 16px;font-size:12.5px;color:var(--txt-dim)}
.rc-count em{margin-right:2px;font:600 28px/1 "Space Grotesk",var(--font-sans);font-style:normal;color:var(--rc)}
.rc dl{display:grid;grid-row:span 3;grid-template-rows:subgrid;margin:0}
.rc dl>div{padding:12px 0;border-top:1px solid var(--glass-line)}
.rc dt{margin-bottom:5px;font-size:12px;font-weight:600;color:var(--rc)}
.rc dd{margin:0;font-size:13.5px;line-height:1.65;color:var(--read);word-break:keep-all;overflow-wrap:anywhere}
.rc-go{align-self:end;justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--rc);text-decoration:underline;text-decoration-color:rgba(var(--rc-rgb),.4);text-underline-offset:4px}
.rc-go:hover{text-decoration-color:var(--rc)}
.rc-go:focus-visible,.howto-stuck a:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
@media(max-width:960px){
  .howto-steps{grid-template-columns:1fr}
  .res-compare{grid-template-columns:1fr;grid-template-rows:none}
  .rc,.rc dl{grid-row:auto;grid-template-rows:none}
  .rc+.rc{border-left:0;border-top:1px solid var(--glass-line)}
}
@media(max-width:560px){
  .howto{margin-top:40px}
  .howto-list li{grid-template-columns:36px minmax(0,1fr);padding:16px}
  .howto-list li::before{width:30px;height:30px;font-size:13px}
  .rc{padding:20px 18px 16px}
}

/* 공통 출발은 순서대로, 목표별 경로·분야별 심화는 하나를 고르는 선택지 — 선택지 구분에는 단계를 잇는 세로선을 그리지 않는다 */
.stage-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 32px}
.stage-directory a{display:flex;flex-direction:column;gap:7px;padding:20px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);transition:border-color .2s,background .2s}
.stage-directory a:hover{border-color:var(--ember);background:rgba(var(--ember-rgb),.08)}
.stage-directory span{font-size:11px;color:var(--ember)}
.stage-directory strong{font-size:15px;word-break:keep-all}
.stage-directory small{color:var(--txt-dim);font-size:12px}
.stage-directory .sd-meta{margin-top:auto;padding-top:6px;font-size:12px;font-style:normal;color:var(--txt-dim)}
.sd-meta b{font-family:"Space Grotesk",var(--font-sans);font-weight:600;color:var(--amber)}
.tpanel[data-track="paths"] .spine,.tpanel[data-track="deep"] .spine{display:none}
.module-index{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.module-index a{min-height:44px;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--glass-line);border-radius:10px;color:var(--txt-dim);font-size:12px;word-break:keep-all}
.module-index a:hover{color:var(--txt);border-color:var(--ember)}
.module-index a span{color:var(--ember);font-family:"Space Grotesk";flex:none}
.optional-resources{margin-top:14px;border:1px solid var(--glass-line);border-radius:12px;overflow:hidden}
.optional-resources summary{min-height:44px;cursor:pointer;padding:14px 18px;color:var(--txt-dim);font-size:13px}
.optional-resources summary span{margin-left:6px;color:var(--ember)}
.optional-resources>p{padding:0 18px 14px;color:var(--txt-dim);font-size:12px;line-height:1.6}
.optional-resources .resources{border-radius:0;border:0;border-top:1px solid var(--glass-line)}
.stage-directory a:focus-visible,.module-index a:focus-visible,.optional-resources summary:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
@media(max-width:560px){.stage-directory{grid-template-columns:1fr}.stage-directory a{padding:16px}.module-index a{width:100%}}
@media(prefers-reduced-motion:reduce){.stage-directory a{transition:none}}

/* ===== 역량 로드맵 ===== */
.roadmap{position:relative;max-width:100%;margin:70px 0 40px;padding-left:0}
.spine{position:absolute;left:33px;top:30px;bottom:60px;width:3px;background:linear-gradient(var(--amber),var(--ember),var(--crim));border-radius:3px;opacity:.5}
.stage{position:relative;box-sizing:border-box;min-width:0;max-width:100%;padding-left:84px;margin-bottom:68px}
.node{position:absolute;left:0;top:0;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;font-size:26px;color:rgb(var(--white-rgb));border:5px solid var(--bg);z-index:2}
/* 2026-10-26 재구축 — 단계 점·표지 색은 데이터의 nodeclass·lvclass(폐지) 대신 단계 kind(공통 출발·목표별 경로·분야별 심화)로 정한다 */
.stage--start>.node{background:linear-gradient(135deg,var(--amber),var(--ember));box-shadow:0 0 26px rgba(var(--amber-rgb),.5)}
.stage--path>.node{background:linear-gradient(135deg,var(--ember),var(--crim));box-shadow:0 0 26px rgba(var(--ember-rgb),.5)}
.stage--deep>.node{background:linear-gradient(135deg,var(--crim),var(--grad-wine));box-shadow:0 0 26px rgba(var(--crim-rgb),.5)}

.stagehead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.lvtag{font-family:"Space Grotesk";font-size:12px;letter-spacing:.08em;padding:5px 12px;border-radius:100px}
.stage--start .lvtag{color:var(--amber);background:rgba(var(--amber-rgb),.12)}
.stage--path .lvtag{color:var(--ember);background:rgba(var(--ember-rgb),.12)}
.stage--deep .lvtag{color:var(--diff-advanced);background:rgba(var(--crim-rgb),.14)}
.stagehead h2{font-family:"Space Grotesk";font-size:clamp(24px,3.5vw,34px);font-weight:600;letter-spacing:-.02em}
.stage>p.lead{color:var(--txt-dim);font-size:15px;line-height:1.75;max-width:760px;margin:10px 0 22px}

/* 단계 계약: 선행 조건과 완료 역량 */
.stage-contract{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0;margin-bottom:18px}
.prerequisites,.goals{min-width:0;padding:17px 18px;background:var(--glass);border:1px solid var(--glass-line);border-radius:14px}
.prerequisites>strong,.goals>strong{display:block;margin-bottom:9px;font-family:"Space Grotesk",var(--font-sans);font-size:12px;letter-spacing:.06em;color:var(--txt-faint)}
.prerequisite-list,.goal-list{min-width:0;display:grid;gap:7px;margin:0;padding:0;list-style:none;color:var(--read);font-size:13px;line-height:1.55}
.prerequisite-list li,.goal-list li{min-width:0;position:relative;padding-left:18px;overflow-wrap:anywhere;word-break:keep-all}
.prerequisite-list li::before{content:"↳";position:absolute;left:0;color:var(--amber)}
.goal-list li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
/* 2026-10-26 재구축 — 경로의 '이런 분께' 줄. 진도 장치(산출물·게이트)는 그리지 않는다. */
.stage-for{margin:-6px 0 16px;font-size:13.5px;color:var(--txt-dim)}
.stage-for strong{margin-right:8px;font-size:12px;font-weight:600;color:var(--amber)}

/* 할 일: 먼저 볼 것(+더 볼 것) → 해 볼 것 */
.modules{min-width:0;display:grid;gap:20px}
.module{box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden;background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);backdrop-filter:blur(14px);padding:0}
.modulehead{min-width:0;padding:22px 24px 19px;background:radial-gradient(100% 160% at 0 0,rgba(var(--ember-rgb),.09),transparent 60%)}
.module-no{display:inline-block;margin-bottom:9px;font-family:"Space Grotesk";font-size:11px;letter-spacing:.1em;color:var(--ember)}
.modulehead h3{min-width:0;font-family:"Space Grotesk",var(--font-sans);font-size:clamp(19px,2.4vw,25px);font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere;word-break:keep-all}
.modulehead .objective{min-width:0;margin-top:7px;color:var(--txt-dim);font-size:13.5px;line-height:1.65;overflow-wrap:anywhere;word-break:keep-all}
.module-flow{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--glass-line)}
.module-flow>section{min-width:0;padding:20px;border-right:1px solid var(--glass-line)}
.module-flow>section:last-child{border-right:0}
.learn{grid-column:1/-1;border-bottom:1px solid var(--glass-line)}
.module-flow>.learn{border-right:0}
/* 2026-10-26 재구축 — 산출물 칸이 없어져 '해 볼 것'도 한 줄을 다 쓴다. 해 볼 것이 없는 할 일은 먼저 볼 것 아래 선을 긋지 않는다 */
.apply{grid-column:1/-1}
.module-flow>.learn:last-child{border-bottom:0}
.module-flow h4{margin:0 0 13px;font-family:"Space Grotesk",var(--font-sans);font-size:12px;letter-spacing:.06em;color:var(--txt-dim)}
.resources{min-width:0;overflow:hidden;border:1px solid var(--glass-line);border-radius:12px;background:rgba(var(--bg-rgb),.28)}
.res{box-sizing:border-box;min-height:44px;display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border-bottom:1px solid rgba(var(--ink-rgb),.06);color:var(--txt);text-decoration:none;transition:background .2s,border-color .2s}
.res:last-child{border-bottom:0}
.res:hover{background:rgba(var(--ink-rgb),.03)}
.ic{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;font-size:15px}
.ic-g{background:rgba(var(--ember-rgb),.14)}
.ic-v{background:rgba(var(--blue-rgb),.14)}
.ic-r{background:rgba(var(--amber-rgb),.12)}
.ic-c{background:rgba(var(--green-rgb),.14)}
.rbody{min-width:0;flex:1 1 180px}
.rbody strong{min-width:0;display:block;font-size:13.5px;font-weight:600;line-height:1.45;overflow-wrap:anywhere;word-break:keep-all}
.rbody span{display:block;min-width:0;margin-top:2px;font-size:11.5px;line-height:1.45;color:var(--txt-faint);overflow-wrap:anywhere;word-break:keep-all}
.rtime{flex:0 0 auto;font-family:"Space Grotesk",var(--font-sans);font-size:11.5px;color:var(--txt-dim);white-space:nowrap}
.rrole{flex:0 0 auto;padding:4px 7px;border-radius:100px;font-family:"Space Grotesk";font-size:9.5px;letter-spacing:.04em;line-height:1;color:var(--read);white-space:nowrap}
.rrole{border:1px solid rgba(var(--amber-rgb),.28);background:rgba(var(--amber-rgb),.08);color:var(--amber)}
.rarr{flex:0 0 auto;color:var(--txt-dim);transition:transform .2s}
.res:hover .rarr{transform:translateX(3px);color:var(--ember)}
.activities{min-width:0;display:grid;gap:8px;margin:0;padding:0;list-style:none;color:var(--read);font-size:12.5px;line-height:1.55}
.activities li{min-width:0;position:relative;padding-left:17px;overflow-wrap:anywhere;word-break:keep-all}
.activities li::before{content:"→";position:absolute;left:0;color:var(--ember)}

/* 구분 끝의 다음 카드 */
.cap{position:relative;padding-left:84px;margin-top:10px}
.cap .node{background:linear-gradient(135deg,var(--green),var(--grad-teal));box-shadow:0 0 26px rgba(var(--green-rgb),.5);font-size:24px}
.capbox{background:radial-gradient(120% 140% at 0% 0%,rgba(var(--green-rgb),.14),transparent 55%),var(--bg-2);border:1px solid var(--glass-line);border-radius:var(--r);padding:30px 32px}
.capbox h3{font-family:"Space Grotesk";font-size:24px;font-weight:600;letter-spacing:-.01em}
.capbox h3 .it{font-family:"Instrument Serif";font-style:italic;font-weight:400;color:var(--green)}
.capbox p{color:var(--txt-dim);font-size:14.5px;margin:12px 0 20px;max-width:560px}
.capbox .go{min-height:44px;display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk";font-size:14px;font-weight:600;color:var(--txt)}
.capbox .go:hover{color:var(--green)}

@media (max-width:960px){.module-flow{grid-template-columns:1fr}.learn{grid-column:auto}.module-flow>section{border-right:0;border-bottom:1px solid var(--glass-line)}.module-flow>section:last-child{border-bottom:0}}
@media (max-width:760px){
  .spine{left:23px}
  .stage{padding-left:60px;margin-bottom:56px}
  .node{width:48px;height:48px;font-size:19px;border-width:4px}
  .stage-contract{grid-template-columns:1fr}
  .module{padding:0}
  .modulehead{padding:19px 17px 16px}
  .module-flow{grid-template-columns:1fr}
  .module-flow>section{padding:17px}
  .res{flex-wrap:wrap;padding:12px}
  .rbody{flex:1 1 calc(100% - 48px)}
  .rbody strong{overflow-wrap:anywhere;word-break:keep-all}
  .rrole{margin-left:44px}
  .activities li{overflow-wrap:anywhere;word-break:keep-all}
  .cap{padding-left:60px}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .phead{padding-top:46px}
  .stage{padding-left:0;padding-top:60px}
  .spine{display:none}
  .stage .node,.cap .node{left:0}
  .stagehead{gap:9px}
  .stagehead h2{width:100%}
  .modulehead h3,.rbody strong{overflow-wrap:anywhere;word-break:keep-all}
  .rrole{margin-left:0}
  .cap{padding-left:0;padding-top:60px}
  .capbox{padding:24px 20px}
}