/* Moments (/moments/, /de/momente/, /fr/moments/ and every hub page), built by scripts/build-moments.py.
   Two pieces only, both drawn from the site's own tokens (/style.css :root) and type: the map on the index
   (two lines, three stops, Succession as the junction) and the quiet "where you are" strip at the foot of every
   hub page. The company line is bronze, the family line wine; the junction is ink. Nothing here restyles the
   explainer sections, the mast or the footer. */

/* The map: one row of stops on wide screens, one column on phones. Each stop draws its own piece of line in
   .mo-rail, so the line runs from stop to stop: Founding on the company track, the junction spanning both
   tracks, Family office on the family track. */
.mo-map .chapter-head{margin-bottom:0}
.mo-stops{list-style:none;margin:48px 0 0;padding:44px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 56px}
.mo-stop{position:relative;padding-top:64px;min-width:0}
.mo-rail{position:absolute;top:0;left:0;right:-56px;height:40px}
.mo-stop:last-child .mo-rail{right:0}
.mo-rail::before{content:"";position:absolute;height:3px;left:12px;right:0}
.mo-company .mo-rail::before{top:9px;background:var(--bronze)}
.mo-junction .mo-rail::before{top:28px;background:var(--wine)}
.mo-family .mo-rail::before{display:none}
.mo-rail i{position:absolute;left:0;width:21px;height:21px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:3px solid}
.mo-company .mo-rail i{top:0;border-color:var(--bronze)}
.mo-family .mo-rail i{top:19px;border-color:var(--wine)}
.mo-junction .mo-rail i{top:0;height:40px;border-radius:11px;border-color:var(--ink)}
.mo-stop .mo-line{margin:0 0 14px}
.mo-family .mo-line{color:var(--wine)}
.mo-junction .mo-line{color:var(--ink)}
.mo-stop h3{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.1;letter-spacing:-.02em;margin:0}
.mo-stop h3 em{font-weight:400}
.mo-figure{font-family:var(--serif);font-weight:400;font-size:clamp(64px,6vw,92px);line-height:1;letter-spacing:-.03em;color:var(--ink);margin:30px 0 0}
.mo-caption{font-size:15px;color:var(--muted);margin:16px 0 0;max-width:340px}
.mo-src{font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0 0;max-width:340px}
.mo-stop .text-link{margin-top:26px}

/* The strip: a ruled band under the closing section, kicker on the left like every other section. Small type,
   muted links; only the current moment is in ink. */
.mo-strip{display:grid;grid-template-columns:.7fr 1.7fr;gap:85px;align-items:start;border-top:1px solid var(--rule);padding:34px 0 40px}
.mo-strip .kicker{margin:2px 0 0}
.mo-strip .kicker a{color:inherit}
.mo-strip-main{max-width:640px}
.mo-strip-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.mo-strip-line li{position:relative;padding-top:24px;font-size:13px;line-height:1.4;color:var(--muted)}
.mo-strip-line li::before{content:"";position:absolute;top:5px;left:0;width:11px;height:11px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:2px solid var(--muted);z-index:1}
.mo-strip-line li::after{content:"";position:absolute;top:9.5px;left:11px;right:0;height:2px;background:var(--bronze)}
.mo-strip-line li.mo-junction::before{width:17px;border-radius:6px}
.mo-strip-line li.mo-junction::after{left:17px;background:var(--wine)}
.mo-strip-line li:last-child::after{display:none}
.mo-strip-line a{color:inherit;text-decoration:none}
.mo-strip-line a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.mo-strip-line .is-here{color:var(--ink);font-weight:500}
.mo-strip-line .is-here::before{background:var(--ink);border-color:var(--ink)}
.mo-strip-step{display:flex;justify-content:space-between;gap:24px;margin:20px 0 0;font-size:13px}
.mo-strip-step a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}
.mo-strip-step a:hover{color:var(--wine)}
.mo-strip-step a[rel=next]{margin-left:auto;text-align:right}

@media(max-width:1180px){
.mo-stops{gap:0 36px}
.mo-rail{right:-36px}
.mo-strip{gap:50px}
}
@media(max-width:900px){
.mo-stops{grid-template-columns:1fr;gap:0;padding-top:34px;margin-top:34px}
.mo-stop{padding:0 0 52px 58px}
.mo-stop:last-child{padding-bottom:0}
.mo-rail,.mo-stop:last-child .mo-rail{top:0;bottom:0;left:0;right:auto;width:40px;height:auto}
.mo-rail::before{width:3px;height:auto;right:auto;top:12px;bottom:0}
.mo-company .mo-rail::before{top:12px;left:9px}
.mo-junction .mo-rail::before{top:12px;left:28px}
.mo-company .mo-rail i{top:0;left:0}
.mo-junction .mo-rail i{top:0;left:0;width:40px;height:21px}
.mo-family .mo-rail i{top:0;left:19px}
.mo-stop h3{font-size:30px}
.mo-strip{grid-template-columns:1fr;gap:18px}
}
@media(max-width:700px){
.mo-stop h3{font-size:28px}
.mo-figure{font-size:60px;margin-top:22px}
.mo-strip{padding:28px 0 34px}
.mo-strip-step{flex-direction:column;gap:10px}
.mo-strip-step a[rel=next]{margin-left:0;text-align:left}
}