/* partials.css
   Header, mobile menu and footer only, extracted from home.css so the homepage
   can load the ported mockup (home-v2.css) without legacy page rules such as
   .hero, .section and .container colliding with it.
   Other pages continue to load the full home.css.
*/
:root{--black:#0A0A0A;--off-white:#FAF9F5;--yellow:#E9FF5C;--yellow-hover:#D4FF2E;--white:#FFFFFF;--card-dark:#151515;--text-dark:#0A0A0A;--text-light:#FAF9F5;--gray-text:#6B6B6B;--gray-text-dark:#A8A8A8;--red-dot:#EF4444;--gray-line:rgba(255, 255, 255, 0.08);--gray-line-light:rgba(10, 10, 10, 0.08);--yellow-border:rgba(233, 255, 92, 0.3);--font-primary:'Poppins',system-ui,-apple-system,sans-serif;--font-mono:'JetBrains Mono','Courier New',monospace;--h1-size:clamp(40px, 5.5vw, 72px);--h2-size:clamp(32px, 4vw, 52px);--h3-size:24px;--h4-size:20px;--body-size:17px;--body-large:19px;--small-size:14px;--mono-label:12px;--container-max:1200px;--section-pad:120px;--section-pad-md:80px;--section-pad-sm:64px;--radius-card:10px;--radius-btn:8px;--radius-tile:8px;--t-fast:150ms ease;--t-base:250ms ease}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background-color:var(--yellow);color:var(--black);font-family:var(--font-primary);font-size:15px;font-weight:600;padding:16px 32px;border-radius:var(--radius-btn);border:none;text-decoration:none;transition:background-color var(--t-fast),transform var(--t-fast);cursor:pointer;white-space:nowrap}
.btn-primary:hover{background-color:var(--yellow-hover);transform:translateY(-2px);color:var(--black)}
.btn-sm{padding:12px 24px;font-size:14px}
.status-bar{position:fixed;top:0;left:0;right:0;z-index:200;height:32px;background-color:var(--black);display:flex;align-items:center;justify-content:center;gap:24px}
.status-bar-inner{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--gray-text-dark);display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
.status-bar-book{color:var(--yellow);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-decoration:none;transition:opacity var(--t-fast)}
.status-bar-book:hover{opacity:.8;color:var(--yellow)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background-color:var(--off-white);transition:border-color var(--t-base),box-shadow var(--t-base)}
.site-header.scrolled{border-bottom:1px solid var(--gray-line-light)}
.nav-container{max-width:var(--container-max);margin:0 auto;padding:0 2rem 0 .75rem}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px}
.nav-logo{text-decoration:none;flex-shrink:0;display:flex;align-items:center}
.nav-logo-img{height:60px;max-width:190px;width:auto;object-fit:contain;object-position:left center;display:block}
.nav-list{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-link{font-family:var(--font-primary);font-size:14px;font-weight:500;color:var(--black);text-decoration:none;position:relative;padding-bottom:2px;transition:color var(--t-fast)}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background-color:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform var(--t-fast)}
.nav-link.active::after,.nav-link:hover::after{transform:scaleX(1)}
.nav-dropdown-wrapper{position:relative}
.nav-dropdown-btn{display:flex;align-items:center;gap:6px;font-family:var(--font-primary);font-size:15px;font-weight:500;color:var(--black);background:0 0;border:none;cursor:pointer;padding:0;position:relative;padding-bottom:2px;transition:color var(--t-fast)}
.nav-dropdown-btn::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background-color:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform var(--t-fast)}
.nav-dropdown-btn.active::after,.nav-dropdown-btn.open::after,.nav-dropdown-btn:hover::after{transform:scaleX(1)}
.nav-dropdown-chevron{transition:transform var(--t-fast)}
.nav-dropdown-btn.open .nav-dropdown-chevron{transform:rotate(180deg)}
.nav-dropdown-panel{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);background-color:var(--white);border:1px solid var(--gray-line-light);border-radius:var(--radius-card);padding:8px;min-width:200px;display:none;z-index:50}
.nav-dropdown-panel.open{display:block}
.nav-dropdown-item{display:block;padding:10px 16px;font-family:var(--font-primary);font-size:14px;font-weight:400;color:var(--black);border-radius:6px;transition:background-color var(--t-fast),color var(--t-fast)}
.nav-dropdown-item:hover{background-color:var(--off-white);color:var(--black)}
/* the JS marks the current page in the dropdown, this makes it visible */
.nav-dropdown-item.active{background-color:var(--off-white);font-weight:500;position:relative}
.nav-dropdown-item.active::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:3px;height:14px;border-radius:2px;background:var(--black)}
.nav-mobile-sublink.active{font-weight:600;color:var(--black)}
.nav-cta-wrap{flex-shrink:0}
.nav-hamburger{display:none;flex-direction:column;gap:6px;padding:8px;cursor:pointer;background:0 0;border:none;flex-shrink:0}
.nav-hamburger span{display:block;width:24px;height:1.5px;background-color:var(--black);transition:transform var(--t-fast),opacity var(--t-fast);transform-origin:center}
.nav-hamburger.open span:first-child{transform:rotate(45deg) translate(5.3px,5.3px)}
.nav-hamburger.open span:nth-child(2){transform:rotate(-45deg) translate(5.3px,-5.3px)}
@media (max-width:1023px){.nav-cta-wrap,.nav-list{display:none}.nav-hamburger{display:flex}.nav-inner{height:64px}}
@media (max-width:768px){.nav-container{padding:0 1.25rem}}
.nav-mobile{position:fixed;top:0;left:0;right:0;bottom:0;z-index:150;background-color:var(--off-white);transform:translateX(100%);transition:transform 250ms ease;overflow-y:auto}
.nav-mobile.open{transform:translateX(0)}
.nav-mobile-inner{padding:80px 1.5rem 2rem;display:flex;flex-direction:column;gap:0;min-height:100%}
.nav-mobile-close{position:absolute;top:20px;right:20px;background:0 0;border:none;font-size:20px;color:var(--black);cursor:pointer;padding:8px}
.nav-mobile-link{display:block;font-family:var(--font-primary);font-size:24px;font-weight:500;color:var(--black);padding:16px 0;border-bottom:1px solid var(--gray-line-light);text-decoration:none;transition:color var(--t-fast)}
.nav-mobile-link.active,.nav-mobile-link:hover{color:var(--black);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:4px}
.nav-mobile-industries-btn{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-primary);font-size:24px;font-weight:500;color:var(--black);padding:16px 0;border-bottom:1px solid var(--gray-line-light);background:0 0;border-top:none;border-left:none;border-right:none;cursor:pointer;text-align:left;transition:color var(--t-fast)}
.nav-mobile-industries-btn svg{transition:transform var(--t-fast)}
.nav-mobile-industries-btn.open svg{transform:rotate(180deg)}
.nav-mobile-subnav{max-height:0;overflow:hidden;transition:max-height var(--t-base)}
.nav-mobile-subnav.open{max-height:500px}
.nav-mobile-sublink{display:block;font-family:var(--font-primary);font-size:18px;font-weight:400;color:var(--gray-text);padding:10px 0 10px 16px;border-bottom:1px solid var(--gray-line-light);text-decoration:none;transition:color var(--t-fast)}
.nav-mobile-sublink:hover{color:var(--black)}
.nav-mobile-cta{margin-top:auto;padding-top:32px}
.dash-footer-row{display:flex;align-items:center;gap:8px;padding-top:4px;border-top:1px solid var(--gray-line-light)}
.dash-footer-dot{width:6px;height:6px;border-radius:50%;background-color:var(--yellow);display:inline-block;flex-shrink:0}
.dash-footer-text{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.1em;color:var(--gray-text);text-transform:uppercase}
.site-footer{background-color:var(--black);color:var(--text-light);border-top:1px solid var(--yellow-border);padding-top:72px;padding-bottom:40px}
.footer-container{max-width:var(--container-max);margin:0 auto;padding:0 2rem}
.footer-grid{display:grid;grid-template-columns:1.9fr 1fr 1.2fr 0.9fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--gray-line)}
.footer-col-brand{padding-right:24px}
.footer-logo{text-decoration:none;display:block;margin-bottom:16px;margin-left:-14px}
.footer-logo-img{height:48px;width:auto;display:block}
.footer-tagline{font-size:14px;color:var(--gray-text-dark);line-height:1.7;max-width:30ch;margin-bottom:24px}
.footer-social{display:flex;gap:10px}
.footer-social-link{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--gray-text-dark);border:1px solid var(--gray-line);border-radius:6px;text-decoration:none;transition:color var(--t-fast),border-color var(--t-fast),background-color var(--t-fast)}
.footer-social-link:hover{color:var(--yellow);border-color:var(--yellow-border);background-color:rgba(233,255,92,.05)}
.footer-col-label{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--yellow);text-transform:uppercase;margin-bottom:20px;display:block}
.footer-link-list{display:flex;flex-direction:column;gap:12px;list-style:none;padding:0}
.footer-link-list a{font-size:14px;color:var(--gray-text-dark);text-decoration:none;transition:color var(--t-fast);line-height:1.4}
.footer-link-list a:hover{color:var(--text-light)}
.footer-cta-link{font-size:13px!important;font-weight:600!important;color:var(--yellow)!important;letter-spacing:.01em}
.footer-cta-link:hover{opacity:.8}
.footer-bottom{padding-top:28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer-copy{font-family:var(--font-primary);font-size:13px;color:rgba(250,249,245,.35);max-width:unset}
.footer-status{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--yellow);display:flex;align-items:center;gap:8px;max-width:unset}
.footer-status-dot{width:6px;height:6px;border-radius:50%;background-color:#22c55e;animation:pulse-status 2.5s ease infinite;display:inline-block;flex-shrink:0}
@media (max-width:1023px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}.footer-col-brand{padding-right:0}}
@media (max-width:639px){.footer-grid{grid-template-columns:1fr;gap:32px}.footer-container{padding:0 1.25rem}.site-footer{padding-top:56px}}
@media (prefers-reduced-motion:reduce){.flow-dot,.footer-status-dot,.reveal,.status-dot{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}

/* ── Brand rule: acid yellow only on black/panel surfaces ─────
   The nav and mobile menu sit on off-white, so their accents are
   black, not acid. Applies site-wide via the shared partials. */
.site-header .btn-primary{background-color:var(--black);color:var(--off-white)}

.site-header .btn-primary:hover{background-color:#1f1f1f;color:var(--off-white)}

.nav-link::after{background-color:var(--black)}

.nav-mobile-link.active,.nav-mobile-link:hover{text-decoration-color:var(--black)}

.nav-mobile-cta .btn-primary{background-color:var(--black);color:var(--off-white)}

.nav-mobile-cta .btn-primary:hover{background-color:#1f1f1f;color:var(--off-white)}


/* Services dropdown holds longer labels than the retired industries list */
.nav-dropdown-panel{min-width:272px}

.nav-dropdown-item{white-space:nowrap}


/* Footer, simplified: logo, one row of primary links, social */
.footer-simple{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:36px}

.footer-nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}

.footer-nav a{font-family:var(--font-primary);font-size:14px;font-weight:500;color:var(--gray-text-dark);text-decoration:none;transition:color var(--t-fast)}

.footer-nav a:hover{color:var(--off-white)}

.footer-legal{display:flex;gap:20px;font-size:12px}

.footer-legal a{color:var(--gray-text-dark);text-decoration:none;transition:color var(--t-fast)}

.footer-legal a:hover{color:var(--off-white)}
@media (max-width:768px){.footer-simple{flex-direction:column;align-items:flex-start;gap:24px}.footer-nav{gap:18px}}

/* Mobile menu row that is both a link and an accordion toggle */
.nav-mobile-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--gray-line-light)}

.nav-mobile-row .nav-mobile-link{flex:1;border-bottom:none}

.nav-mobile-row-toggle{flex:none;background:0 0;border:none;color:var(--black);padding:16px 4px;cursor:pointer;border-bottom:none}

.nav-mobile-row-toggle svg{transition:transform var(--t-fast)}

.nav-mobile-row-toggle.open svg{transform:rotate(180deg)}


/* Visually hidden, still read by assistive tech */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ── Homepage v2 port: nav and footer match project-docs/design/homepage-v2.html ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:90;background:#FAF9F5;border-bottom:1px solid rgba(10,10,10,.12);box-shadow:none}

.site-header.scrolled{border-bottom:1px solid rgba(10,10,10,.12);box-shadow:none}

.nav-container{max-width:1200px;margin:0 auto;padding:0 32px}

.nav-inner{height:70px}

.nav-logo-img{height:40px;max-width:170px}

.nav-list{gap:30px}

.nav-link{font-size:14px;font-weight:500;opacity:.75;color:#0A0A0A}

.nav-link:hover,.nav-link.active{opacity:1}

.nav-link::after{background-color:#0A0A0A}

.site-header .btn-primary{background-color:#0A0A0A;color:#FAF9F5;padding:11px 22px;font-size:14px;font-weight:500;border-radius:100px}

.site-header .btn-primary:hover{background-color:#1f1f1f;color:#FAF9F5}

.nav-dropdown-panel{border-radius:10px}
@media(max-width:600px){.nav-container{padding:0 20px}}


/* footer, mockup treatment */
.site-footer{background:#0A0A0A;color:#FAF9F5;border-top:1px solid rgba(250,249,245,.12);padding:38px 0}

.footer-container{max-width:1200px;margin:0 auto;padding:0 32px}

.footer-simple{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;padding-bottom:0}

.footer-nav{display:flex;gap:24px}

.footer-nav a{color:#A8A8A8;font-size:13.5px;font-weight:400}

.footer-nav a:hover{color:#FAF9F5}

.footer-logo-img{height:34px}

.footer-bottom{border-top:none;padding-top:18px;margin-top:18px;border-top:1px solid rgba(250,249,245,.12)}

.footer-copy,.footer-legal a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#A8A8A8}
@media(max-width:600px){.footer-container{padding:0 20px}}

/* Focus rings follow the mockup's surface rule: ink on light, acid on dark.
   The header and mobile menu sit on off-white, so they never take an acid ring. */
.site-header a:focus-visible,.site-header button:focus-visible,
.nav-mobile a:focus-visible,.nav-mobile button:focus-visible,
.skip:focus-visible{outline:2px solid #0A0A0A;outline-offset:3px}
.site-footer a:focus-visible{outline:2px solid #E9FF5C;outline-offset:3px}


/* ══ Case Studies mega menu, two panel ═════════════════════
   Replaces the five column version. Each case study appears exactly once,
   under one primary category. Secondary categories stay on the overview page.
   Sits on .nav-dropdown-panel so navigation.js keeps handling open, close,
   escape, outside click and active marking. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the label is a real link to the overview, the chevron is the button that
   owns the panel, so a keyboard user can open it without being navigated */
.nav-dropdown-wrapper{display:flex;align-items:center;gap:4px}
.nav-dropdown-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;padding:0;background:0 0;border:none;cursor:pointer;color:var(--black)}
.nav-dropdown-toggle::after{display:none}
.nav-dropdown-toggle:focus-visible{outline:2px solid var(--black);outline-offset:2px;border-radius:4px}
/* anchored to the header container, never to the trigger, so it cannot hang
   off the viewport at 1024px */
.nav-container{position:relative}
.nav-dropdown-wrapper-mega{position:static}

.csm{position:absolute;top:calc(100% + 14px);left:auto;right:0;transform:none;width:min(1160px,100%);max-width:none;min-width:0;padding:0;overflow:hidden;border-radius:12px}
.csm-grid{display:grid;grid-template-columns:248px 1fr}
@media(max-width:1120px){.csm-grid{grid-template-columns:220px 1fr}}

/* ── left panel, dark category rail ─────────────────────── */
.csm-nav{background:var(--black);padding:26px 0 22px}
.csm-head{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-text-dark);margin:0 0 18px;padding:0 26px}
.csm-cat{display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;background:0 0;border:0;border-left:2px solid transparent;cursor:pointer;padding:11px 26px;color:var(--off-white);font-family:var(--font-primary)}
.csm-cat-t{font-size:14.5px;font-weight:500;line-height:1.3}
.csm-cat-n{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-text-dark)}
.csm-cat:hover .csm-cat-t{color:var(--yellow)}
/* selected state is a yellow rule plus weight, never colour on its own */
.csm-cat.is-on{border-left-color:var(--yellow);background:rgba(250,249,245,.04)}
.csm-cat.is-on .csm-cat-t{font-weight:700}
.csm-cat.is-on .csm-cat-n{color:var(--yellow)}
.csm-cat:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}

/* ── right panel, project list ──────────────────────────── */
.csm-body{background:var(--off-white);padding:26px 30px 0;display:flex;flex-direction:column;min-width:0}
.csm-list{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;align-content:start;max-height:392px;overflow-y:auto}
@media(max-width:1120px){.csm-list{grid-template-columns:1fr}}
.csm-item{display:block;position:relative;padding:16px 34px 17px 0;border-top:1px solid var(--gray-line-light);border-radius:0;white-space:normal;text-decoration:none}


.csm-item[hidden]{display:none}
.csm-item-c{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-text);margin-bottom:7px}
.csm-item-t{display:block;font-family:var(--font-primary);font-size:16px;font-weight:500;line-height:1.3;color:var(--black);overflow-wrap:break-word}
.csm-item-s{display:block;font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--gray-text);margin-top:7px}
.csm-item-a{position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--gray-text);font-size:15px;transition:transform var(--t-fast),color var(--t-fast)}
.csm-item:hover{background:0 0}
.csm-item:hover .csm-item-t{text-decoration:underline;text-underline-offset:3px}
.csm-item:hover .csm-item-a{color:var(--black);transform:translateY(-50%) translateX(4px)}
.csm-item:focus-visible{outline:2px solid var(--black);outline-offset:-2px}
/* the page you are on: yellow marker plus weight and underline */
.csm-item.active::before{content:"";position:absolute;left:-12px;top:18px;bottom:18px;width:2px;background:var(--yellow)}
.csm-item.active .csm-item-t{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.csm-item.active .csm-item-c{color:var(--black)}

/* ── claude code service preview ────────────────────────── */
.csm-claude{max-width:52ch;padding:4px 0 8px}
.csm-claude[hidden]{display:none}
.csm-claude-h{font-family:var(--font-primary);font-size:19px;font-weight:500;line-height:1.35;color:var(--black);margin:0 0 12px}
.csm-claude-p{font-family:var(--font-mono);font-size:12px;line-height:1.75;color:var(--gray-text);margin:0 0 18px}
.csm-claude-a{display:inline-flex;align-items:center;gap:8px;padding:0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--black);border-bottom:1px solid var(--black);border-radius:0;text-decoration:none}
.csm-claude-a:hover{background:0 0;color:var(--black)}

/* ── bottom bar ─────────────────────────────────────────── */
.csm-bar{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;border-top:1px solid var(--gray-line-light);padding:15px 0 17px}
.csm-bar-a{display:inline-flex;align-items:center;gap:8px;padding:0;border-radius:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--black);text-decoration:none;white-space:normal}
.csm-bar-a:hover{background:0 0;text-decoration:underline;text-underline-offset:4px}
.csm-bar-a span{color:var(--gray-text)}
@media(max-width:1023px){.csm{display:none}}
@media(prefers-reduced-motion:reduce){.csm-item-a{transition:none}}

/* ── mobile: one category accordion per primary category ── */
.nav-mobile-row-sub{padding-left:14px}
.nav-mobile-cat{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--black);padding:12px 0;display:block}
.nav-mobile-subnav-2{padding-left:14px}
.nav-mobile-sublink-2{padding-left:14px}
.nav-mobile-sublink-2 b{display:block;font-family:var(--font-primary);font-size:15px;font-weight:500;line-height:1.4}
.nav-mobile-sublink-2 span{display:block;font-family:var(--font-mono);font-size:11.5px;line-height:1.6;color:var(--gray-text);margin-top:4px}
.nav-mobile-sublink-2.active{position:relative}
.nav-mobile-sublink-2.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--yellow)}
.nav-mobile-sublink-2.active b{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.nav-mobile-all{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* the inner scroll cut the last row off behind the bottom bar. Four rows of
   two fit inside the target height without it, so the list sizes naturally
   and the whole panel stays under 480px. */
.csm-list{max-height:none;overflow:visible}
.csm-item{padding:14px 34px 15px 0}
.csm-body{padding:24px 30px 0}

/* one column at 1024 made the menu 875px tall, taller than the viewport it
   had to sit in. The rail plus two columns still fits at that width. */
@media(max-width:1120px){
  .csm-list{grid-template-columns:1fr 1fr;gap:0 26px}
  .csm-body{padding:22px 24px 0}
}

/* the JS marks the first visible row, because :first-child cannot see past a
   hidden sibling once the list is filtered */
.csm-item{border-top:1px solid var(--gray-line-light)}
.csm-item.is-top{border-top:0}

/* eyebrow is only useful in the All view, see navigation.js */
.csm-body.is-filtered .csm-item-c{display:none}
.csm-body.is-filtered .csm-item-t{margin-top:2px}
/* the website category cannot list twenty sites, so it points at the full
   build history on the web development page instead */
.csm-more{margin:16px 0 0;font-family:var(--font-mono);font-size:11.5px;line-height:1.75;color:var(--gray-text);max-width:62ch}
.csm-more[hidden]{display:none}
.csm-more a{color:var(--black);border-bottom:1px solid var(--black);text-decoration:none;white-space:nowrap}

/* nine projects make five rows, which pushed the panel past 600px. The list
   scrolls inside itself so the panel stays compact and the bottom bar, which
   is a sibling below it, is never covered. */
.csm-list{max-height:396px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}