/* A compact reading companion to the collision display; no arrival animation. */
.cern-header-particle-wordmark {
    display: block;
    width: clamp(150px, 43vw, 210px);
    height: auto;
    /* Match the homepage's particle-letter artwork on a light header. */
    filter: brightness(0) saturate(100%);
}
.cern-guide { width: min(1160px, calc(100% - 3rem)); margin: 3rem auto 5rem; }
.cern-guide-intro { max-width: 1050px; padding-bottom: 2.5rem; }
.cern-guide-kicker { margin: 0 0 .75rem; color: #365bb7; font-size: .875rem; font-weight: 600; }
body.cern-intro-page .cern-guide h1 { max-width: 25ch; margin: 0; font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.4; }
.cern-guide-lede { max-width: 49rem; margin: 1.25rem 0 2rem; color: #526178; font-size: 1.125rem; line-height: 1.9; }
.cern-guide-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid #d4ddec; border-radius: .8rem; background: #fff; }
.cern-guide-roles > div { padding: 1.3rem 1.5rem; }
.cern-guide-roles > div + div { border-left: 1px solid #d4ddec; }
.cern-guide-roles dt { font-size: 1.6rem; font-weight: 700; color: #264c8b; }
.cern-guide-roles dd { margin: .35rem 0 0; font-size: 1rem; color: #526178; }
.cern-guide-section { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 2fr); gap: 2.5rem; padding: 2.75rem 0; border-top: 1px solid #d4ddec; }
.cern-guide-section-heading > span { color: #61718d; font-size: .875rem; font-variant-numeric: tabular-nums; }
body.cern-intro-page .cern-guide h2 { margin: .45rem 0 0; font-size: 1.5rem; line-height: 1.55; }
.cern-guide-section-body { min-width: 0; }
.cern-guide-section-body > p { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.9; }
.cern-guide-source { display: inline-flex; align-items: center; min-height: 44px; color: #305ca8; font-size: .875rem; text-underline-offset: .2em; overflow-wrap: anywhere; }
.cern-guide-source-row { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.cern-guide-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; padding: 0; margin: 1.5rem 0 .75rem; list-style: none; counter-reset: process; }
.cern-guide-flow li { counter-increment: process; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1rem; background: #eaf0fa; border-top: 2px solid #7195ce; font-size: .875rem; color: #4b5f7b; }
.cern-guide-flow li::before { content: counter(process, decimal-leading-zero); color: #426494; font-size: .875rem; }
.cern-guide-flow strong { font-size: 1rem; color: #233e68; }
.cern-guide-return { margin: 1.5rem 0; }
.cern-guide-section-body > .cern-guide-notice { margin: 1.5rem 0 0; color: #69768a; font-size: .875rem; }
.cern-guide :is(a, button):focus-visible { outline: 2px solid #365bb7; outline-offset: 4px; }
.cern-guide-skip { position: absolute; top: .5rem; left: .5rem; z-index: 30; padding: .6rem 1rem; background: #fff; color: #264c8b; transform: translateY(-180%); }
.cern-guide-skip:focus { transform: none; }
body.cern-intro-page .nav-links a { min-height: 44px; font-size: .875rem; }
@media (max-width: 760px) {
    .cern-guide { width: calc(100% - 2rem); margin-top: 2rem; }
    .cern-guide-section { grid-template-columns: 1fr; gap: 1.25rem; padding: 2rem 0; }
    .cern-guide-roles > div { padding: 1rem; }
    .cern-guide-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .cern-guide-roles { grid-template-columns: 1fr; }
    .cern-guide-roles > div { display: grid; grid-template-columns: 5rem 1fr; align-items: baseline; gap: 1rem; }
    .cern-guide-roles > div + div { border-left: 0; border-top: 1px solid #d4ddec; }
    .cern-guide-flow { grid-template-columns: 1fr; }
}
