/* Modern Engineer masthead: one compact row, with native mobile disclosure. */
:root{--nav:0px;--masthead-height:68px}
body{overflow-x:visible}
html{scroll-padding-top:calc(var(--masthead-height) + env(safe-area-inset-top,0px) + 20px)}
.me-header.nav{position:sticky;inset:0 0 auto;top:0;z-index:80;display:block;flex:none;height:auto;width:100%;padding-top:env(safe-area-inset-top,0px);background:#0b0d14;color:#f4f5fa;border-bottom:1px solid #282c38;isolation:isolate}
.me-header.nav::before{content:none}
.me-header__row{max-width:1280px;min-height:var(--masthead-height);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:24px;position:relative}
.me-brand{display:inline-flex;align-items:center;gap:10px;flex:none;color:#f4f5fa;text-decoration:none;font-family:var(--ui);font-weight:800;letter-spacing:-.045em;line-height:1.02;font-size:17px}
.me-brand__mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid #7d8aab;border-radius:8px;font-size:12px;letter-spacing:-.06em;color:#bdcaff;background:#141a2a}
.me-brand__name{display:block}
.me-brand__name span{display:block}
.me-desktop-nav{display:flex;align-items:center;justify-content:center;gap:4px;margin-left:auto}
.me-desktop-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;font:600 13px/1.3 var(--ui);color:#c7ccd9;text-decoration:none;white-space:nowrap;border-radius:8px}
.me-desktop-nav a:hover,.me-desktop-nav a[aria-current="true"]{background:#1c2335;color:#f6f7ff}
.me-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.me-search{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#e2e7f3;text-decoration:none}
.me-search:hover,.me-search[aria-current="true"]{background:#1c2335;color:#c6d1ff}
.me-search svg{width:20px;height:20px;display:block}
.me-menu{display:none}
.me-menu summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 13px;border:1px solid #41495d;border-radius:24px;color:#e2e7f3;font:600 13px/1 var(--ui);cursor:pointer;user-select:none}
.me-menu summary::-webkit-details-marker{display:none}
.me-menu summary::marker{content:""}
.me-menu summary svg{width:17px;height:17px;flex:none}
.me-menu[open] summary{background:#d7dfff;border-color:#d7dfff;color:#101521}
.me-menu__close{display:none}
.me-menu[open] .me-menu__open{display:none}
.me-menu[open] .me-menu__close{display:block}
.me-menu__panel{position:absolute;right:max(24px,env(safe-area-inset-right,0px));top:calc(100% + 8px);width:min(360px,calc(100vw - 44px));max-height:calc(100dvh - var(--masthead-height) - env(safe-area-inset-top,0px) - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border:1px solid #3b4254;border-radius:16px;padding:12px;background:#111621;box-shadow:0 16px 36px rgba(0,0,0,.35)}
.me-menu__label{margin:6px 12px 10px;font:700 10px/1.4 var(--ui);letter-spacing:.17em;text-transform:uppercase;color:#aab5cc}
.me-menu__panel a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:12px;border-radius:9px;color:#e5eaf5;font:600 15px/1.35 var(--ui);text-decoration:none;overflow-wrap:anywhere}
.me-menu__panel a + a{border-top:1px solid #252d3d}
.me-menu__panel a::after{content:'→';font-weight:400;color:#9daed4;flex:none}
.me-menu__panel a:hover,.me-menu__panel a[aria-current="true"]{background:#222d44;color:#e0e7ff}
.me-header a:focus-visible,.me-header summary:focus-visible{outline:2px solid #c2ceff;outline-offset:3px}
/* The masthead handles navigation at every scroll position. */
.pnav{display:none!important}
/* Compact editorial opening, with consistent gutters and no double padding. */
.hub{display:block;min-height:0;max-width:1280px;padding:clamp(24px,4vw,48px) max(24px,env(safe-area-inset-right,0px)) 48px max(20px,env(safe-area-inset-left,0px));margin:0 auto}
.hub__intro{padding:0 0 clamp(24px,3vw,36px);margin:0 0 clamp(24px,3vw,36px);border-bottom:1px solid #2b2e3b}
.hub__word{max-width:none;font-size:clamp(1.85rem,5vw,3.4rem);line-height:1.04;margin:0;letter-spacing:-.045em}
.hub__line{font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.55;color:#c3c7d4;max-width:64ch;margin:.8rem 0 0}
.hub>.feat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,48px);padding:0;margin:0;width:100%}
.hub .feat__pic{border-radius:14px;aspect-ratio:auto;box-shadow:none;background:#0c101a}
.hub .feat__pic img{display:block;width:100%;height:auto;object-fit:contain;transform:none}
.hub .feat__b{padding:0;min-width:0}
.hub .feat__k{font-size:.65rem;line-height:1.6;letter-spacing:.12em}
.hub .feat__t{font-size:clamp(1.85rem,3.2vw,2.8rem);line-height:1.08;margin-top:.65rem}
.hub .feat__d{font-size:1.08rem;line-height:1.6;color:#c3c7d4}
.hub>.band{margin-top:clamp(36px,5vw,64px)}
.hub>.band>.wrap{padding-inline:0}
@media(max-width:1099px){.me-desktop-nav{display:none}.me-menu{display:block}.me-header__row{gap:12px}}
@media(max-width:760px){
 :root{--masthead-height:64px}
 .hub>.feat{grid-template-columns:minmax(0,1fr);gap:20px}
 .hub__word{font-size:clamp(1.85rem,7.5vw,2.7rem)}
 .hub .feat__t{font-size:clamp(1.8rem,7.7vw,2.8rem)}
 .hub .feat__d{font-size:1.02rem}
 .hub .feat__m{margin-top:.8rem}
}
@media(max-width:359px){.me-menu__text{display:none}.me-menu summary{width:44px;justify-content:center;padding:0}.me-brand{font-size:16px}.me-header__row{gap:8px}}
@media(prefers-reduced-motion:reduce){.me-header *{scroll-behavior:auto;transition:none}}

/* ---------------------------------------------------------------------------
   Layout corrections, verified in a headless browser at 390px and 1440px.
   --------------------------------------------------------------------------- */

/* The header is sticky and 65px tall, but every heading had scroll-margin-top:0,
   so jumping to a section left its heading underneath the header. Reserve the
   header's height plus a little breathing room for anything scrolled to. */
:root{--me-header-h:65px}
html{scroll-padding-top:calc(var(--me-header-h) + 1rem)}
h1,h2,h3,h4,[id]{scroll-margin-top:calc(var(--me-header-h) + 1rem)}

/* A wordmark reads as one thing, so it sits on one line. This also takes the
   header from 65px to about 52px, which is 13px of reading space back on every
   screen of every page. */
.me-brand__name{display:flex;align-items:baseline;gap:.32em;white-space:nowrap}
.me-brand__name span{display:inline}

/* The row was pinned at 64px to fit a two-line wordmark. With the wordmark on one
   line the tallest thing in it is a 40px control, so 54px is comfortable and
   returns 10px of reading space on every screen. */
.me-header__row{min-height:54px}
:root{--me-header-h:55px}