:root {
  --group-ink: #18304b;
  --group-blue: #28618a;
  --group-muted: #566b7e;
  --group-line: #d8e2eb;
  --group-paper: #ffffff;
}
body {
  margin: 0;
  color: #27384a;
  background: #f3f7fa;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.65;
}
a { color: #174f83; text-underline-offset: .18em; }
a:focus-visible, summary:focus-visible { outline: 3px solid #a14d13; outline-offset: 3px; }
.group-shell { max-width: 1080px; margin: auto; padding: 1rem clamp(1rem, 3vw, 2rem) 4rem; }
.skip-link { position: absolute; top: -5rem; left: 1rem; z-index: 10; padding: .6rem .8rem; border-radius: .4rem; color: white; background: #173b5d; }
.skip-link:focus { top: 1rem; }
.group-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 0 1rem; border-bottom: 1px solid var(--group-line); }
.group-brand { color: var(--group-ink); font-weight: 750; text-decoration: none; }
.language-switch { display: flex; flex-wrap: wrap; gap: .55rem; font-size: .9rem; }
.language-switch a { padding: .3rem .55rem; border: 1px solid var(--group-line); border-radius: 999px; background: white; text-decoration: none; }
.path-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 1.25rem; }
.path-nav a { padding: .42rem .7rem; border: 1px solid #d3dfe8; border-radius: 999px; background: white; color: #34536c; font-size: .88rem; font-weight: 650; text-decoration: none; }
.path-nav a[aria-current="page"] { border-color: #28618a; background: #eaf3f8; color: #173b5d; }
.breadcrumbs { margin: .25rem 0 .7rem; color: var(--group-muted); font-size: .88rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: #8293a1; }
.eyebrow { margin: .8rem 0 .25rem; color: #52748d; font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3 { color: var(--group-ink); line-height: 1.25; }
h1 { max-width: 880px; margin: .25rem 0 .7rem; font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.025em; }
h2 { margin: 0 0 .55rem; font-size: clamp(1.35rem, 2.8vw, 1.8rem); }
h3 { margin: 0 0 .4rem; font-size: 1.08rem; }
.lede { max-width: 790px; margin: .3rem 0 1.2rem; padding:.8rem 1rem; border-left:4px solid #4b86aa; border-radius:0 11px 11px 0; color:#334e65; background:#eaf3f8; font-size:1.1rem; line-height:1.7; }
.overview-lede { max-width:900px; margin:.5rem 0 1.35rem; padding:1rem 1.15rem; border-left-width:5px; background:#e5f0f6; font-size:1.16rem; font-weight:550; }
.answer-card, .content-card, .route-card, .source-card { border: 1px solid var(--group-line); border-radius: 14px; background: var(--group-paper); box-shadow: 0 6px 22px #18304b0a; }
.answer-card { margin: 1rem 0 1.4rem; padding: 1.15rem 1.25rem; border-left: 5px solid var(--group-blue); }
.answer-card p { margin: .35rem 0; }
.content-card { margin: 1rem 0; padding: clamp(1rem, 2.4vw, 1.5rem); }
.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.route-card { display: flex; flex-direction: column; min-height: 13rem; box-sizing: border-box; padding: 1rem; color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.route-card:hover, .route-card:focus-visible { border-color: #7398b3; transform: translateY(-2px); }
.route-card .route-index { margin-bottom: .45rem; color: #577890; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.route-card p { margin: .25rem 0; color: #52677a; }
.route-card .route-link { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:auto; padding:.65rem .8rem; border-radius:9px; color:#fff; background:#28618a; font-weight:750; text-decoration:none; }
.route-card .route-link span { font-size:1.2rem; line-height:1; }
.route-card:hover .route-link, .route-card:focus-visible .route-link { background:#173b5d; }
.content-card > p:first-of-type { margin-top: .3rem; }
.content-card p { max-width: 850px; }
.definition-list { display: grid; grid-template-columns: minmax(145px, .35fr) 1fr; gap: .55rem 1rem; margin: .7rem 0; }
.definition-list dt { color: #23486c; font-weight: 750; }
.definition-list dd { margin: 0; }
.lane-list { display: grid; gap: .7rem; margin: 1rem 0; padding: 0; list-style: none; }
.lane { display: grid; grid-template-columns: minmax(150px, .34fr) 1fr; gap: .8rem; padding: .9rem 1rem; border: 1px solid var(--group-line); border-left: 5px solid var(--lane); border-radius: 10px; background: white; }
.lane h3 { margin: .1rem 0; }
.lane p { margin: .2rem 0; }
.lane time, .date-label { display: block; margin-bottom: .2rem; color: #62788b; font-size: .8rem; font-weight: 750; }
.lane-morin { --lane: #7352a3; } .lane-systems { --lane: #147d79; }
.lane-meadows { --lane: #34739d; } .lane-words { --lane: #b97820; }
.lane-cascade { --lane: #bc5b46; } .lane-synthesis { --lane: #4d687f; }
.timeline-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:1rem 0; }
.timeline-lane { padding:1rem; border:1px solid var(--group-line); border-top:4px solid var(--lane); border-radius:12px; background:#fff; }
.timeline-lane h3 { min-height:2.6em; margin:.1rem 0 .8rem; font-size:1.02rem; }
.timeline-lane ol { display:grid; gap:.7rem; margin:0; padding:0; list-style:none; }
.timeline-lane li { display:grid; gap:.18rem; padding:.7rem .75rem; border-left:2px solid color-mix(in srgb, var(--lane), white 48%); background:#f8fafc; }
.timeline-lane time { color:#607286; font-size:.76rem; font-weight:750; }
.timeline-lane strong { color:#23486c; line-height:1.35; }
.timeline-lane span { color:#52677a; font-size:.88rem; line-height:1.45; }
.relation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.relation { padding: .85rem 1rem; border-left: 3px dashed #668399; border-radius: 0 10px 10px 0; background: #f7fafc; }
.relation strong { display: block; margin-bottom: .2rem; color: #23486c; }
.relation-kind { display:inline-block; margin-bottom:.45rem; padding:.24rem .55rem; border:1px solid #cfdae3; border-radius:999px; color:#52677a; background:#fff; font-size:.7rem; font-weight:800; letter-spacing:.035em; }
.comparison { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.table-wrap { overflow-x: auto; margin: 1rem 0; border-radius: 10px; }
.comparison caption { padding: .65rem; color: #52677c; text-align: left; font-weight: 650; }
.comparison th, .comparison td { padding: .75rem; border: 1px solid var(--group-line); text-align: left; vertical-align: top; }
.comparison th { background: #edf3f7; color: #23486c; }
.comparison td { background: white; }
.note { margin: 1rem 0; padding: .9rem 1rem; border-left: 4px solid #147d79; border-radius: 0 9px 9px 0; background: #eff8f7; }
.source-card { margin: 1rem 0; padding: 1rem; }
.source-card ul { margin: .45rem 0; padding-left: 1.2rem; }
.source-card li { margin: .4rem 0; }
.page-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem; margin: 1.4rem 0; }
.page-end a { padding: .7rem .9rem; border: 1px solid var(--group-line); border-radius: 10px; background: white; text-decoration: none; font-weight: 700; }
.group-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--group-line); color: #607286; font-size: .85rem; }
.group-entry { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem; margin:.7rem auto 1.2rem; padding:.85rem 1rem; border:1px solid #cbd9e5; border-radius:12px; background:#fff; }
.group-entry p { margin:0; color:#43596d; line-height:1.45; }
.group-entry-links { display:flex; flex-wrap:wrap; gap:.5rem; }
.group-entry-links a { padding:.45rem .7rem; border:1px solid #cbd9e5; border-radius:999px; color:#173b5d; background:#f7fafc; font-weight:700; text-decoration:none; }
.progression { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto; gap:1.6rem 2.8rem; margin:1.25rem auto; padding:0; list-style:none; }
.progression li { position:relative; z-index:1; box-sizing:border-box; width:min(100%, 19rem); justify-self:center; padding:1rem 1.05rem; border:1px solid var(--group-line); border-radius:12px; background:#fff; box-shadow:0 4px 15px #18304b0d; }
.progression li:first-child { grid-column:1; grid-row:1; width:min(100%, 19rem); justify-self:center; }
.progression li:nth-child(2) { grid-column:2; grid-row:1; }
.progression li:nth-child(3) { grid-column:1 / 3; grid-row:2; width:min(100%, 19rem); justify-self:center; }
.stage-number { display:block; margin-bottom:.35rem; color:#147d79; font-size:.75rem; font-weight:800; letter-spacing:.08em; }
.progression p { margin:.35rem 0 0; }
.feedback-diagram { position:relative; isolation:isolate; margin:1rem 0; padding:.35rem .2rem .1rem; }
.feedback-arrows { position:absolute; z-index:0; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
svg.feedback-arrows > path { fill:none; stroke:#28618a; stroke-width:3; stroke-linecap:round; opacity:.72; }
.relation-legend { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; margin:.8rem 0; padding:0; list-style:none; }
.relation-legend li { padding:.35rem .65rem; border:1px solid #cbd9e5; border-radius:999px; color:#23486c; background:#f7fafc; font-size:.82rem; font-weight:700; }
.feedback-caption { position:relative; z-index:1; max-width:760px; margin:.8rem auto 0; padding:.7rem .9rem; border-radius:9px; background:#edf4f8; color:#34536c; text-align:center; }
.map-intersections { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin:.75rem 0 1rem; }
.map-intersections article { padding:.85rem 1rem; border:1px solid var(--group-line); border-top:3px solid #398d88; border-radius:10px; background:white; }
.map-intersections h3 { font-size:.98rem; }
.map-intersections p { margin:.25rem 0 0; color:#52677a; font-size:.92rem; line-height:1.5; }
.map-intersection-link { display:inline-block; margin:.55rem .65rem 0 0; color:#174f83; font-size:.84rem; font-weight:750; text-underline-offset:.15em; }
.cascade-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin:1rem 0; }
.cascade-flow > div { position:relative; min-height:7rem; box-sizing:border-box; padding:.85rem .9rem; border:1px solid var(--group-line); border-top:4px solid #398d88; border-radius:11px; background:#f9fbfd; color:#425a70; font-size:.92rem; line-height:1.5; }
.cascade-flow span { display:block; margin-bottom:.35rem; color:#52748d; font-size:.72rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.cascade-outcomes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin:1rem 0; padding:0; list-style:none; }
.cascade-outcomes li { padding:.8rem .9rem; border:1px solid var(--group-line); border-left:4px solid #398d88; border-radius:10px; background:#f8fbfc; }
.cascade-outcomes strong,.cascade-outcomes span { display:block; }
.cascade-outcomes span { margin-top:.25rem; color:#52677a; font-size:.9rem; line-height:1.45; }
.entry-section { margin:3.25rem 0 1.4rem; text-align:center; }
.entry-section h2 { margin-bottom:.15rem; }
.entry-down { display:inline-block; margin:.2rem 0 .8rem; color:var(--group-blue); font-size:1.8rem; line-height:1; }
.entry-section .route-grid { text-align:left; }
.strand-map { margin:1rem 0; padding:1rem 1.1rem; border:1px solid var(--group-line); border-radius:12px; background:#fff; }
.strand-map figcaption { margin-bottom:.7rem; color:#43596d; font-weight:700; }
.strand-map ol { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1.2rem; margin:.6rem 0; padding:0; list-style:none; }
.strand-map li { position:relative; min-height:4.2rem; padding:.7rem .8rem .7rem 1.1rem; border-left:3px solid #a8bdcc; border-radius:0 9px 9px 0; background:#f7fafc; }
.strand-map li::before { content:""; position:absolute; top:1rem; left:-.43rem; width:.7rem; height:.7rem; border:2px solid #fff; border-radius:50%; background:#28618a; box-shadow:0 0 0 1px #28618a; }
.strand-map li a { display:block; color:#173b5d; font-weight:750; text-decoration:none; }
.strand-map li small { display:block; margin-top:.12rem; color:#607286; line-height:1.4; }
.map-note, .source-note { margin:.65rem 0 0; color:#607286; font-size:.88rem; }
.section-index { margin:1rem 0; padding:1rem; border:1px solid var(--group-line); border-radius:12px; background:white; }
.section-index ol { display:flex; flex-wrap:wrap; gap:.45rem 1.1rem; margin:.5rem 0 0; padding-left:1.25rem; }
.section-index li { padding:.1rem 0; }
.strand-detail { scroll-margin-top:1rem; }
.section-number { display:inline-block; margin-bottom:.3rem; color:#147d79; font-size:.74rem; font-weight:800; letter-spacing:.08em; }
.related-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin:1rem 0; }
.related-links a { display:block; padding:.8rem .9rem; border:1px solid var(--group-line); border-radius:10px; background:#fafcfd; text-decoration:none; }
.related-links strong, .related-links span { display:block; }
.related-links span { margin-top:.2rem; color:#607286; font-size:.9rem; line-height:1.45; }
.gateway-grid { margin:1.6rem 0; }
.gateway-grid .route-card { min-height:12rem; padding:1.25rem; }
.draft-note { padding:.28rem .6rem; border:1px solid #e7d19b; border-radius:999px; color:#725316; background:#fff9e8; font-size:.8rem; font-weight:700; }
.system-map { position:relative; margin:1.2rem 0 .25rem; padding:1rem; overflow:hidden; border:1px solid var(--group-line); border-radius:14px; background:#fff; }
.system-map figcaption { position:relative; z-index:1; margin-bottom:.7rem; color:var(--group-ink); font-weight:750; }
.map-lines { position:absolute; inset:2.6rem .3rem .4rem; width:calc(100% - .6rem); height:calc(100% - 3rem); fill:none; stroke:#718b9f; stroke-width:3; stroke-dasharray:5 6; opacity:.82; }
.map-lines path:nth-child(2) { stroke:#987db7; }
.map-lines path:nth-child(3) { stroke:#398d88; }
.map-lines path:nth-child(4) { stroke:#c08a46; }
.map-nodes { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:3rem 6rem; padding:1rem 5rem; }
.map-nodes a { display:block; min-height:4.5rem; padding:.7rem .85rem; border:1px solid #d4e0e8; border-radius:10px; background:rgba(255,255,255,.96); text-decoration:none; box-shadow:0 3px 12px #18304b0d; }
.map-nodes a strong,.map-nodes a span { display:block; }
.map-nodes a strong { color:#173b5d; }
.map-nodes a span { margin-top:.15rem; color:#607286; font-size:.86rem; line-height:1.4; }
.map-core { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); padding:.45rem .65rem; border:1px solid #b8c9d6; border-radius:999px; color:#173b5d; background:#eef4f7; font-size:.72rem; line-height:1.2; text-align:center; font-weight:750; }
@media (max-width: 640px) {
  .group-top { align-items: flex-start; flex-direction: column; }
  .route-grid, .relation-list { grid-template-columns: 1fr; }
  .lane { grid-template-columns: 1fr; gap: .25rem; }
  .definition-list { grid-template-columns: 1fr; gap: .15rem; }
  .definition-list dd { margin-bottom: .6rem; }
  .progression, .strand-map ol, .related-links, .map-intersections, .cascade-outcomes, .timeline-grid { grid-template-columns: 1fr; }
  .progression { gap:1.15rem; }
  .progression li:first-child,.progression li:nth-child(2),.progression li:nth-child(3) { grid-column:1; grid-row:auto; width:auto; }
  .feedback-arrows { display:none; }
  .progression li + li::before { content:"↓"; position:absolute; top:-1.05rem; left:calc(50% - .45rem); color:#28618a; font-size:1.15rem; font-weight:800; }
  .feedback-caption { margin-top:.65rem; text-align:left; }
  .entry-section { margin-top:2.5rem; }
  .cascade-flow { grid-template-columns:1fr; gap:.55rem; }
  .cascade-flow > div { min-height:0; }
  .map-lines,.map-core { display:none; }
  .map-nodes { grid-template-columns:1fr; gap:.55rem; padding:.3rem 0; }
  .table-wrap { overflow:visible; }
  .comparison { display:block; min-width:0; border-collapse:separate; border-spacing:0; }
  .comparison thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; clip-path:inset(50%); }
  .comparison tbody, .comparison tr { display:block; width:100%; }
  .comparison tr { overflow:hidden; margin:0 0 .75rem; border:1px solid var(--group-line); border-radius:11px; background:#fff; }
  .comparison th[scope="row"] { display:block; padding:.75rem .85rem; border:0; background:#edf3f7; }
  .comparison td { display:grid; grid-template-columns:minmax(7rem,.38fr) minmax(0,1fr); gap:.55rem; padding:.7rem .85rem; border:0; border-top:1px solid var(--group-line); }
  .comparison td::before { content:attr(data-label); color:#23486c; font-size:.82rem; font-weight:750; }
}

.site-context { max-width:1160px; margin:0 auto; padding:1rem 1.25rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; border-bottom:1px solid #d8e2eb; background:rgba(255,255,255,.94); color:#18304b; font-weight:650; }
.site-context a { text-decoration:none; }
.site-context nav { display:flex; gap:1rem; }
.site-footer { max-width:1160px; margin:2rem auto 0; padding:1.25rem; border-top:1px solid #d8e2eb; display:flex; justify-content:center; gap:1.25rem; font-size:.88rem; }
.feedback-arrows { z-index:2; }
svg.feedback-arrows > path { stroke:#28618a; stroke-width:2.8; opacity:.82; }
.progression li { z-index:3; min-height:9.5rem; display:flex; flex-direction:column; justify-content:center; }
.progression { gap:1.6rem 2.8rem; }
.progression li strong { font-size:1.08rem; }
@media (max-width:640px) { .site-context { align-items:flex-start; } }