); node-page banners keep 64/56 above. */ main > .ir-hero .container { padding: var(--hero-pad-top) 0 var(--hero-pad-bottom); } @media (max-width: 700px) { main > .ir-hero .container { padding-top: var(--hero-pad-top-mobile); } } .ir-hero .eyebrow { color: rgba(255,255,255,.72); } .ir-hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 2.9rem; line-height: 1.1; font-weight: 500; max-width: 900px; } .ir-hero .ir-sub { max-width: 760px; margin: 18px 0 0; color: rgba(255,255,255,.86); font-size: 1.05rem; } .ir-hero .breadcrumb { font-size: 0.86rem; color: rgba(255,255,255,.66); margin: 0 0 18px; } .ir-hero .breadcrumb a { color: rgba(255,255,255,.86); } /* ── Node-page banners: light variant (matches the polanthro / polisci .detail-hero scheme). Only the detail pages put .ir-hero as a direct child of ; the course homepage nests it inside

, so it stays dark. ── */ body > .ir-hero { background: var(--paper-deep); color: var(--ink); border-bottom: 1px solid var(--line); } body > .ir-hero .breadcrumb { color: var(--rust); } body > .ir-hero .breadcrumb a { color: var(--rust); } body > .ir-hero .eyebrow { color: var(--rust); } body > .ir-hero h1 { color: var(--ink); } body > .ir-hero .ir-sub { color: var(--muted); } /* ── How to read / legend block ── */ .howto { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 32px; align-items: start; } .howto ol { margin: 0; padding-left: 20px; } .howto li { margin: 10px 0; color: var(--ink); } .howto li b { color: var(--ink); } .legend { border: 1px solid var(--line); border-radius: 10px; background: var(--white); padding: 22px; box-shadow: 0 8px 24px rgba(23,33,29,.05); } .legend h3 { margin: 0 0 14px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .legend-row { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; } .legend-row .lv { margin-top: 3px; } .legend-row .legend-text strong { display: block; font-size: 0.92rem; } .legend-row .legend-text span { display: block; color: var(--muted); font-size: 0.84rem; } .legend .legend-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.84rem; } /* ── Level badges ── */ .lv { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.62rem; font-weight: 800; color: var(--white); line-height: 1; flex: none; } .lv.lv1 { background: var(--lv1); } .lv.lv2 { background: var(--lv2); } .lv.lv3 { background: var(--lv3); } .lv-badges { display: inline-flex; gap: 4px; vertical-align: middle; } /* ── The genealogy tree ── */ .tree-wrap { overflow-x: auto; padding: 8px 0 4px; } .tree-grid { display: grid; grid-template-columns: 96px repeat(4, minmax(150px, 1fr)); column-gap: 16px; row-gap: 30px; align-items: start; min-width: 880px; position: relative; } /* faint vertical rails behind each branch column */ .tree-grid::before { content: ""; position: absolute; top: 0; bottom: 0; left: 96px; right: 0; background-image: linear-gradient(var(--rail), var(--rail)), linear-gradient(var(--rail), var(--rail)), linear-gradient(var(--rail), var(--rail)), linear-gradient(var(--rail), var(--rail)); background-size: 2px 100%, 2px 100%, 2px 100%, 2px 100%; background-repeat: no-repeat; background-position: calc(0.5 * (100% / 4) - 1px) 0, calc(1.5 * (100% / 4) - 1px) 0, calc(2.5 * (100% / 4) - 1px) 0, calc(3.5 * (100% / 4) - 1px) 0; opacity: 0.5; pointer-events: none; } .tick { grid-column: 1; font-size: 0.72rem; font-weight: 700; color: var(--rust); text-transform: uppercase; letter-spacing: 0.02em; text-align: right; padding-top: 14px; white-space: nowrap; } /* a tree node */ .node { position: relative; display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--white); padding: 13px 14px 12px; text-decoration: none; color: var(--ink); box-shadow: 0 6px 18px rgba(23,33,29,.05); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; z-index: 1; } .node:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(154,87,55,.5); color: var(--ink); } .node .node-author { font-size: 0.74rem; color: var(--muted); margin: 0 0 3px; } .node .node-label { font-weight: 700; font-size: 0.96rem; line-height: 1.25; } .node .node-year { position: absolute; top: 11px; right: 13px; font-size: 0.7rem; color: var(--muted); font-weight: 700; } .node .lv-badges { margin-top: 9px; } .node.trunk { grid-column: 3 / 6; background: #f5f7f4; border-color: #cdd8cd; } .node.col-critical { grid-column: 2; border-style: dashed; background: #fbfaf7; } .node.col-realism { grid-column: 3; } .node.col-liberal { grid-column: 4; } .node.col-constructivist { grid-column: 5; } .node.major { border-color: var(--forest); border-width: 1.5px; background: #f3f7f3; } .node.major .node-label { font-size: 1.04rem; } /* relationship keyword chips sitting on the entering line */ .rels { display: flex; flex-direction: column; gap: 5px; margin: 0 0 8px; } .rel { position: relative; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%; padding: 3px 9px; border-radius: 999px; background: var(--paper-deep); border: 1px dashed var(--rust); color: var(--rust); font-size: 0.71rem; font-weight: 700; cursor: help; outline: none; } .rel::before { content: "↳"; font-weight: 800; } .rel .rel-card { position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; width: 280px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); box-shadow: var(--shadow); font-size: 0.82rem; font-weight: 400; line-height: 1.5; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease, visibility 140ms; } .rel:hover .rel-card, .rel:focus .rel-card, .rel:focus-within .rel-card { opacity: 1; visibility: visible; transform: translateY(0); } .rel .rel-card b { display: block; margin-bottom: 4px; color: var(--rust); font-size: 0.78rem; } /* ── Application battlegrounds ── */ .battlegrounds { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } .bg-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 3px dashed var(--rust); border-radius: 10px; background: var(--white); padding: 18px; text-decoration: none; color: var(--ink); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; } .bg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); border-color: rgba(154,87,55,.5); } .bg-card h3 { margin: 0 0 8px; font-size: 1.05rem; } .bg-card p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; } .bg-card .bg-tag { display: inline-block; margin-bottom: 10px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rust); } /* ── Detail (week) pages ── */ .reading-list { list-style: none; margin: 0; padding: 0; } .reading-list li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--ink); } .reading-list li:first-child { border-top: 0; } .reading-list .r-journal { color: var(--muted); font-style: italic; } .paradigm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; } .paradigm-meta .lv-badges { margin: 0; } .qa { margin: 18px 0 26px; } .qa .q { margin: 0 0 6px; font-weight: 700; color: var(--forest); font-size: 0.96rem; } .qa .q::before { content: "Q "; color: var(--rust); font-weight: 800; } .qa .a { margin: 0 0 12px; color: var(--ink); } .qa .a:last-child { margin-bottom: 0; } .reading-block { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 26px; scroll-margin-top: 90px; } .reading-block:first-of-type { border-top: 0; } .reading-block > h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 500; margin: 0 0 4px; } .reading-block .r-cite { color: var(--muted); font-size: 0.86rem; margin: 0 0 14px; } .exercise-box, .application-box { border: 1px solid var(--line); border-radius: 10px; background: var(--white); padding: 20px 22px; margin: 22px 0; } .exercise-box { border-left: 4px solid var(--forest); } .application-box { border-left: 4px solid var(--gold); background: #fffdf8; } .exercise-box h3, .application-box h3 { margin-top: 0; } .exercise-prompt { color: var(--muted); font-size: 0.9rem; margin: 0 0 12px; } .waltz-deep { border-left: 4px solid var(--blue); background: #f7fafc; border-radius: 10px; padding: 22px 24px; margin: 26px 0; } .waltz-deep h3 { margin-top: 0; } .waltz-deep h4 { margin: 20px 0 6px; font-size: 1rem; } /* ── Responsive ── */ @media (max-width: 860px) { .howto { grid-template-columns: 1fr; } .battlegrounds { grid-template-columns: repeat(2, minmax(0,1fr)); } .ir-hero h1 { font-size: 2.1rem; } } @media (max-width: 560px) { .battlegrounds { grid-template-columns: 1fr; } }