/* Home, reorganized. Line art draws itself once it is seen; Still motion shows it complete. */
.hg { width: 100%; height: auto; display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hg.big { stroke-width: 1.8; }
.hg .faint { stroke-dasharray: 3 6; opacity: .5; }
.hg-dot { fill: var(--f-roman); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity var(--t2) var(--arrive) .9s, transform var(--t3) var(--arrive) .9s; }
.dr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--travel); }
.on .dr { stroke-dashoffset: 0; }
.on .hg-dot { opacity: 1; transform: scale(1); }
.hg .faint.dr { stroke-dasharray: 1; }
.on .hg .faint.dr { stroke-dasharray: 3 6; }
.m-still .dr, .m-still .hg-dot { transition: none !important; stroke-dashoffset: 0; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dr, .hg-dot { transition: none !important; stroke-dashoffset: 0; opacity: 1; transform: none; } }
.h-tag { font: 10px/1.6 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f-roman-text); }
.arch .h-tag { color: #ff8a8d; }
.h-go { font: 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f-accent); margin-top: auto; padding-top: var(--s2); }
.h-acts { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; margin-top: var(--s4); }
.h-lead { font-size: clamp(16px, 1.5vw, 18px); color: var(--f-muted); max-width: 34em; margin-top: var(--s3); }
.h-book h2 em, .h-now h2 em, .h-passion h2 em, .h-ideas h2 em { font-style: italic; color: var(--f-accent); }

/* Hero doors */
.hero-actions .btn.primary { background: var(--f-porcelain); border-color: var(--f-porcelain); color: var(--f-indigo); }
.hero-actions .btn.primary:hover { border-color: var(--f-azure); }

/* I: The arc */
.h-arc .sec-head { margin-bottom: var(--s5); }
.h-arc-grid { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s5); align-items: center; }
.h-arc-grid > * { min-width: 0; }
.h-arc-svg { width: 100%; height: auto; display: block; overflow: visible; }
.h-arc-ghost { fill: none; stroke: var(--f-architecture-line); stroke-width: 2; stroke-dasharray: 4 10; }
.h-arc-line { fill: none; stroke: var(--f-azure); stroke-width: 4; stroke-linecap: round; transition-duration: 2.2s; }
.h-node { cursor: pointer; opacity: 0; transition: opacity var(--t3) var(--arrive); }
.on .h-node { opacity: 1; }
.m-still .h-node { opacity: 1; transition: none; }
.h-node-dot { fill: var(--f-porcelain); transition: fill var(--t1); }
.h-node-halo { fill: #030d1900; stroke: var(--f-azure); stroke-width: 2; opacity: 0; transition: opacity var(--t2); }
.h-node text { font: 15px var(--font-mono); letter-spacing: .12em; fill: var(--f-architecture-kicker); }
.h-node.cur .h-node-dot { fill: var(--f-roman); }
.h-node.cur .h-node-halo { opacity: 1; }
.h-node.cur text { fill: var(--f-porcelain); }
.h-node:hover .h-node-halo { opacity: .6; }
.h-arc-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--f-architecture-line); margin-top: var(--s3); }
.h-arc-tabs button { background: none; border: 0; border-right: 1px solid var(--f-architecture-line); color: var(--f-architecture-text); text-align: left; padding: var(--s2) var(--s2) var(--s2) 0; padding-left: var(--s2); min-height: 56px; display: grid; gap: 2px; cursor: pointer; font: inherit; position: relative; }
.h-arc-tabs button:first-child { padding-left: 0; }
.h-arc-tabs button:last-child { border-right: 0; }
.h-arc-tabs b { font: 400 20px/1 var(--font-editorial); color: var(--f-porcelain); font-weight: 400; }
.h-arc-tabs span { font: 10px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.h-arc-tabs button.cur b { color: var(--f-azure); }
.h-arc-tabs button.cur::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--f-roman); }
.h-arc-detail { min-height: 420px; display: grid; gap: var(--s2); align-content: start; padding: var(--s4); border: 1px solid var(--f-architecture-line); background: #081422cc; }
.h-arc-art { width: 132px; color: var(--f-azure); margin-bottom: var(--s2); }
.h-arc-detail h3 { font: 400 clamp(32.931px, 3vw, 41.889px)/1.05 var(--font-editorial); letter-spacing: -.03em; }
.h-arc-detail p { color: var(--f-architecture-text); }
@media (max-width: 1000px) { .h-arc-grid { grid-template-columns: 1fr; } .h-arc-detail { min-height: 0; } }
@media (max-width: 620px) { .h-arc-tabs span { display: none; } .h-node text { font-size: 22px; } .h-arc-art { width: 96px; } }

/* II: Now */
.h-now-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.h-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); background: var(--f-surface); border: 1px solid var(--f-line); color: var(--f-ink); text-decoration: none; transition: border-color var(--t2) var(--arrive), transform var(--t1) var(--arrive); min-width: 0; }
.h-card:hover { border-color: var(--f-accent); transform: translateY(-1.618px); }
.h-card-art { width: 104px; color: var(--f-accent); margin-bottom: var(--s3); }
.h-card h3 { font: 400 41.889px/1.02 var(--font-editorial); letter-spacing: -.03em; }
.h-sub { font: 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--f-muted); }
.h-card p { font-size: 15px; color: var(--f-muted); line-height: 1.6; }
@media (max-width: 1000px) { .h-now-grid { grid-template-columns: 1fr; } .h-card { display: grid; grid-template-columns: 104px 1fr; column-gap: var(--s4); } .h-card > :not(.h-card-art) { grid-column: 2; } .h-card-art { grid-row: 1 / span 6; } }
@media (max-width: 560px) { .h-card { display: flex; } }

/* III: The book */
.h-book { background: #0b2148; color: var(--f-porcelain); position: relative; overflow: hidden; }
.h-book .secno { color: #ff8a8d; }
.h-book h2 { font: 400 clamp(41.889px, 5.4vw, 86px)/.98 var(--font-editorial); letter-spacing: -.05em; }
.h-book h2 em { color: var(--f-azure); }
.h-book .h-lead { color: #c3d6ea; }
.h-book-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s6); align-items: center; }
.h-book-grid > * { min-width: 0; }
.h-parts { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 1px solid #9fc7df40; }
.h-parts button { width: 100%; display: grid; grid-template-columns: 36px 1fr auto; gap: var(--s2); align-items: baseline; background: none; border: 0; border-bottom: 1px solid #9fc7df40; padding: 10px 0; color: #b0c7de; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.h-parts span { font: 10px var(--font-mono); letter-spacing: .1em; color: #ff8a8d; }
.h-parts b { font: 400 20.352px/1.2 var(--font-editorial); font-weight: 400; color: var(--f-porcelain); }
.h-parts i { font: normal 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.h-parts button.cur b { color: var(--f-azure); }
.h-parts button.cur { box-shadow: inset 3px 0 0 var(--f-roman); padding-left: 10px; }
.h-part-line { margin-top: var(--s3); min-height: 3.2em; color: #c3d6ea; font: italic 400 20px/1.4 var(--font-editorial); }
.h-book .btn.primary { background: var(--f-porcelain); border-color: var(--f-porcelain); color: var(--f-indigo); }
.h-book .link { color: var(--f-porcelain); }
.h-ap { width: 100%; height: auto; display: block; overflow: visible; }
.h-ap-frame { fill: none; stroke: #9fc7df40; stroke-width: 2; }
.h-ap-sq { fill: none; stroke: #9fc7df30; stroke-width: 1.6; }
.h-ap-ghost { fill: none; stroke: #9fc7df40; stroke-width: 2; stroke-dasharray: 4 10; }
.h-ap-arc { fill: none; stroke: var(--f-azure); stroke-width: 6; stroke-linecap: round; transition-duration: .9s; opacity: .55; }
.h-ap-arc.cur { opacity: 1; stroke-width: 9; }
.h-ap-node { fill: var(--f-porcelain); opacity: 0; transition: opacity var(--t3) var(--arrive); }
.on .h-ap-node { opacity: 1; }
.h-ap-halo { fill: none; stroke: var(--f-azure); stroke-width: 2.5; opacity: 0; transition: opacity var(--t2); }
.h-ap-node.cur .h-ap-halo { opacity: 1; }
.h-ap-node.cur { fill: var(--f-azure); }
.h-ap-focal { fill: #b32025; stroke: #ff5a5f; stroke-width: 3; opacity: 0; transition: opacity var(--t3) 2.4s; }
.on .h-ap-focal { opacity: 1; }
.m-still .h-ap-node, .m-still .h-ap-focal { opacity: 1; transition: none; }
@media (max-width: 1000px) { .h-book-grid { grid-template-columns: 1fr; gap: var(--s5); } .h-book-art { order: -1; } }

/* Passion wheel */
.h-wheel-wrap { display: grid; place-items: center; }
.h-wheel { width: min(100%, 460px); height: auto; display: block; }
.h-seg { cursor: pointer; outline: none; }
.h-seg path { fill: var(--f-surface); stroke: var(--f-line); stroke-width: 1.4; transition: fill var(--t2) var(--arrive); }
.h-seg text { font: 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--f-muted); pointer-events: none; }
.h-seg:hover path, .h-seg:focus-visible path { stroke: var(--f-accent); }
.h-seg.cur path { fill: var(--f-accent); stroke: var(--f-accent); }
.h-seg.cur text { fill: var(--f-onAccent); }
.h-wheel-core { fill: var(--f-soft); stroke: var(--f-line); }
.h-wheel-n { font: 400 52px var(--font-editorial); fill: var(--f-ink); }
.h-wheel-k { font: 10px var(--font-mono); letter-spacing: .16em; fill: var(--f-roman-text); }
.h-passion h2 { font: 400 clamp(41.889px, 4.6vw, 67.777px)/1.02 var(--font-editorial); letter-spacing: -.04em; }
.h-dim { margin-top: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); min-height: 7.4em; display: grid; gap: 6px; align-content: start; }
.h-dim b { font: 400 32.931px/1.1 var(--font-editorial); font-weight: 400; }
.h-dim span { color: var(--f-muted); }

/* IV: Ideas */
.h-feature { display: grid; grid-template-columns: 1fr 1.618fr; border: 1px solid var(--f-line); background: var(--f-surface); text-decoration: none; color: var(--f-ink); transition: border-color var(--t2) var(--arrive); }
.h-feature:hover { border-color: var(--f-accent); }
.h-feature > * { min-width: 0; }
.h-feature-art { display: grid; place-items: center; padding: var(--s5); background: var(--f-soft); border-right: 1px solid var(--f-line); color: var(--f-accent); }
.h-feature-art .hg { width: min(100%, 240px); }
.h-feature-copy { padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s2); justify-content: center; }
.h-feature h3 { font: 400 clamp(32.931px, 3.6vw, 53.283px)/1.04 var(--font-editorial); letter-spacing: -.035em; }
.h-feature p { color: var(--f-muted); max-width: 36em; }
.h-threads-k { display: block; margin: var(--s5) 0 var(--s3); }
.h-threads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.h-thread { display: grid; gap: 6px; align-content: start; padding: var(--s3); border: 1px solid var(--f-line); background: var(--f-surface); text-decoration: none; color: var(--f-ink); transition: border-color var(--t2) var(--arrive), transform var(--t1) var(--arrive); min-width: 0; }
.h-thread:hover { border-color: var(--f-accent); transform: translateY(-1.618px); }
.h-thread .hg { width: 64px; color: var(--f-accent); margin-bottom: var(--s2); }
.h-thread b { font: 400 25.889px/1.1 var(--font-editorial); font-weight: 400; }
.h-thread span { font-size: 14px; color: var(--f-muted); }
.h-thread i { font: normal 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--f-roman-text); margin-top: var(--s1); }
@media (max-width: 1000px) { .h-threads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .h-feature { grid-template-columns: 1fr; } .h-feature-art { border-right: 0; border-bottom: 1px solid var(--f-line); padding: var(--s4); } .h-feature-art .hg { width: 160px; } }
@media (max-width: 420px) { .h-threads { grid-template-columns: 1fr; } }

/* V: Go deeper */
.h-quote { margin: 0 0 var(--s6); padding-top: 0; }
.h-quote::before { color: #ff8a8d; top: 0; }
.h-quote blockquote { color: var(--f-porcelain); }
.h-quote figcaption { color: var(--f-architecture-kicker); }
.h-doors { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s4); margin-top: var(--s3); }
.h-door { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1px solid var(--f-architecture-line); background: var(--f-architecture-card); color: var(--f-porcelain); text-decoration: none; transition: border-color var(--t2) var(--arrive); min-width: 0; }
.h-door:hover { border-color: var(--f-azure); }
.h-door .atlas-stage { margin-bottom: var(--s2); }
.h-door-art { width: 140px; color: var(--f-azure); margin: var(--s2) 0 var(--s3); }
.h-door b { font: 400 32.931px/1.05 var(--font-editorial); font-weight: 400; letter-spacing: -.02em; }
.h-door span { color: var(--f-architecture-text); font-size: 15px; }
.h-door i { font: normal 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f-azure); margin-top: auto; padding-top: var(--s2); }
@media (max-width: 900px) { .h-doors { grid-template-columns: 1fr; } }

.ov-note{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--f-muted);border-left:2px solid var(--f-accent);padding:.2em 0 .2em .9em;margin:0 0 var(--s5)}
#eBody .ov-note{font-size:12px;line-height:1.7;max-width:none}

/* ---------- Expanded ideas (ideas-x.js) ---------- */
.ix-fig { margin: var(--s4) 0; }
.ix-fig svg { fill: none; stroke: var(--f-porcelain); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ix-fig .ix-ghost { stroke: var(--f-architecture-line); stroke-width: 2; stroke-dasharray: 4 10; }
.ix-fig .ix-line { stroke: var(--f-architecture-text); }
.ix-fig .ix-az { stroke: var(--f-azure); }
.ix-fig .ix-rd { stroke: #ff5a5f; }
.ix-fig .ix-thick { stroke-width: 5; }
.ix-fig .ix-dash.dr { transition-property: stroke-dashoffset, opacity; }
.ix-fig.on .ix-dash { opacity: .55; }
.ix-fig .ix-t { fill: var(--f-architecture-kicker); stroke: none; font: 26px var(--font-mono); letter-spacing: .14em; opacity: 0; transition: opacity var(--t3) var(--arrive); }
.ix-fig .ix-t.ix-s { font-size: 21px; fill: var(--f-architecture-text); }
.ix-fig .ix-t.ix-k { font-size: 21px; }
.ix-fig .ix-t.ix-n { font: 30px var(--font-editorial); letter-spacing: 0; fill: var(--f-porcelain); }
.ix-fig .ix-t.ix-azt { fill: var(--f-azure); }
.ix-fig .ix-t.ix-rt { fill: #ff8a8d; }
.ix-fig.on .ix-t { opacity: 1; }
.ix-fig .ix-dot { fill: #b32025; stroke: #ff5a5f; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity var(--t2) var(--arrive), transform var(--t3) var(--arrive); }
.ix-fig.on .ix-dot { opacity: 1; transform: none; }
.ix-fig .ix-run { fill: var(--f-porcelain); stroke: none; opacity: 0; transition: opacity var(--t3) 2s; }
.ix-fig .ix-run.ix-az { fill: var(--f-azure); }
.ix-fig.on .ix-run { opacity: 1; }
.ix-fig .ix-needle { stroke: #ff8a8d; stroke-width: 4; transform-box: view-box; transform: rotate(-70deg); opacity: 0; }
.ix-fig.on .ix-needle { animation: ixNeedle 2.4s cubic-bezier(.3,.7,.2,1) both; }
@keyframes ixNeedle { 0% { opacity: 1; transform: rotate(-70deg); } 30% { transform: rotate(55deg); } 50% { transform: rotate(-30deg); } 68% { transform: rotate(16deg); } 84% { transform: rotate(-6deg); } 100% { opacity: 1; transform: rotate(0deg); } }
.ix-fig .ix-fog { stroke-width: 2; }
.m-still .ix-fig .ix-t, .m-still .ix-fig .ix-dot, .m-still .ix-fig .ix-run { transition: none !important; opacity: 1; transform: none; }
.m-still .ix-fig .ix-needle { animation: none !important; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ix-fig .ix-t, .ix-fig .ix-dot, .ix-fig .ix-run { transition: none !important; opacity: 1; transform: none; }
  .ix-fig .ix-needle { animation: none !important; opacity: 1; transform: none; }
}
.ix .ix-sub { font: 400 clamp(22px, 2.2vw, 27px)/1.2 var(--font-editorial); letter-spacing: -.01em; color: var(--f-ink); margin: var(--s5) 0 var(--s2); }
.ix-voices { display: grid; gap: var(--s3); margin: var(--s4) 0; }
@media (min-width: 760px) { .ix-voices { grid-template-columns: 1fr 1fr; } }
.ix-v { margin: 0; padding: var(--s4); display: grid; align-content: start; gap: var(--s2); position: relative; }
.ix-rob { background: var(--f-architecture); color: var(--f-porcelain); }
.ix-res { background: var(--f-surface); border: 1px solid var(--f-line); }
.ix-vk { font: 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: #ff8a8d; }
.ix-res .ix-vk { color: var(--f-roman-text); }
.ix-v blockquote { margin: 0; font: italic 400 clamp(20px, 1.9vw, 24px)/1.4 var(--font-editorial); letter-spacing: -.01em; }
.ix-rob blockquote { color: var(--f-porcelain); }
.ix-res blockquote { color: var(--f-accent); }
.ix-v figcaption { display: grid; gap: 2px; font: 10px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--f-architecture-kicker); }
.ix-res figcaption { color: var(--f-muted); }
.ix-v figcaption b { font-weight: 400; letter-spacing: .16em; color: var(--f-porcelain); }
.ix-res figcaption b { color: var(--f-ink); }
.ix-faq { margin-top: var(--s5); border-top: 1px solid var(--f-line); }
.ix-faq details { border-bottom: 1px solid var(--f-line); padding: var(--s2) 0; }
.ix-faq summary { cursor: pointer; font-weight: 600; color: var(--f-ink); }
.ix-faq details p { margin: var(--s2) 0 0; color: var(--f-muted); }
.ix > p { margin: 0 0 var(--s3); }
.ix > .ix-sub + p { margin-top: 0; }
.ix-src { margin-top: var(--s5); }
.ix-src ol { margin: 0; padding-left: 1.4em; font-size: 14px; line-height: 1.6; color: var(--f-muted); }
.ix-src li { margin-bottom: var(--s1); }
.ix-src a { font: 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--f-accent); white-space: nowrap; }