/* ============================================================================
   vmenin.com — site chrome: header, page sub-navigation, phone tab bar, footer.
   Shared by every page (tools/build-chrome.js writes the markup). It carries
   its own tokens, so it looks the same on the Night pages and on the CV, whose
   palette is a different one. Colour follows <html data-theme>.

   Layout contract
     .gh       fixed header, --gh-h tall: mark · site links · Connect · theme
     .subnav   optional, authored by the page: its own anchors, fixed under
               the header, one scrolling row on every width
     .gtab     phone only (≤ 860px): the site links as a bottom tab bar;
               the header then keeps only the mark, Connect and the theme
     .gf       footer: identity, site links + legal, profiles
   ========================================================================== */
:root{
  --gh-h:64px; --sub-h:0px;
  --gh-bg:rgba(5,11,24,.82); --gh-solid:#050b18; --gh-ink:#e9eef7; --gh-dim:#9db1cc; --gh-faint:#6d829f;
  --gh-line:rgba(255,255,255,.10); --gh-tint:255,255,255; --gh-acc:#7fd4f5; --gh-acc-rgb:0,161,224;
  --gh-grad:linear-gradient(120deg,#7fd4f5,#00a1e0 60%,#3d7dff); --gh-on:#04101f;
  --gh-shadow:0 -10px 28px rgba(0,0,0,.28);
}
:root[data-theme="light"]{
  --gh-bg:rgba(244,247,251,.86); --gh-solid:#f4f7fb; --gh-ink:#16325c; --gh-dim:#47597c; --gh-faint:#5c6a86;
  --gh-line:rgba(11,45,96,.14); --gh-tint:11,45,96; --gh-acc:#0b5cab; --gh-acc-rgb:11,127,176;
  --gh-shadow:0 -10px 28px rgba(11,45,96,.12);
}
body.has-sub{--sub-h:46px}

/* ---- header ---------------------------------------------------------------- */
.gh{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--gh-h);
  display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);
  padding:0 clamp(16px,4vw,48px);
  font-family:'Open Sans',-apple-system,'Segoe UI',sans-serif;
  background:var(--gh-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--gh-line);
}
.gh::after{   /* read progress, fed by the page script through --sp */
  content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform-origin:0 50%;transform:scaleX(var(--sp,0));background:var(--gh-grad);opacity:.85;pointer-events:none;
}
.gh-mark{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--gh-ink);text-decoration:none;font-weight:800;font-size:15px;letter-spacing:-.02em}
.gh-mark i{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  color:var(--gh-on);background:var(--gh-grad);
}
.gh-mark i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:5.4;stroke-linecap:round;stroke-linejoin:round}
.gh-nav{display:flex;gap:4px;margin-left:auto}
.gh-nav a{
  white-space:nowrap;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--gh-dim);text-decoration:none;transition:color .2s ease,background .2s ease;
}
.gh-nav a:hover{color:var(--gh-ink);background:rgba(var(--gh-tint),.08)}
.gh-nav a[aria-current="page"]{color:var(--gh-ink);background:rgba(var(--gh-acc-rgb),.18)}
.gh-cta{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap;
  padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:700;text-decoration:none;
  color:var(--gh-on);background:var(--gh-grad);box-shadow:0 8px 22px rgba(0,161,224,.26);
  transition:transform .2s ease,box-shadow .2s ease;
}
.gh-cta svg{width:14px;height:14px}
.gh-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,161,224,.36)}
.gh .theme-tg{
  display:inline-grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:999px;cursor:pointer;
  background:rgba(var(--gh-tint),.05);border:1px solid var(--gh-line);color:var(--gh-dim);margin:0;padding:0;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.gh .theme-tg:hover{color:var(--gh-acc);background:rgba(var(--gh-tint),.11);transform:none}
.gh .theme-tg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gh .theme-tg .i-moon{display:none}
:root[data-theme="light"] .gh .theme-tg .i-sun{display:none}
:root[data-theme="light"] .gh .theme-tg .i-moon{display:block}

/* ---- page sub-navigation ------------------------------------------------------ */
.subnav{
  position:fixed;left:0;right:0;top:var(--gh-h);z-index:59;height:var(--sub-h);
  display:flex;align-items:center;gap:4px;overflow-x:auto;overflow-y:hidden;
  padding:0 clamp(16px,4vw,48px);scrollbar-width:none;-webkit-overflow-scrolling:touch;
  font-family:'Open Sans',-apple-system,'Segoe UI',sans-serif;
  background:var(--gh-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--gh-line);
}
.subnav::-webkit-scrollbar{display:none}
/* the page's own name labels the row, and takes the reader back to the top */
.subnav .sub-top{
  flex:0 0 auto;margin:0 8px 0 0;padding:6px 10px 6px 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gh-acc);
  transition:opacity .2s ease;
}
.subnav .sub-top:hover{opacity:.75}
.subnav a{
  flex:0 0 auto;white-space:nowrap;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--gh-dim);text-decoration:none;transition:color .2s ease,background .2s ease;
}
.subnav a:hover{color:var(--gh-ink);background:rgba(var(--gh-tint),.07)}
.subnav a.on{color:var(--gh-ink);background:rgba(var(--gh-acc-rgb),.16)}
/* the first section clears both bars; every anchor lands below them */
body.has-sub main > section:first-child{margin-top:var(--sub-h)}
section[id],h2[id]{scroll-margin-top:calc(var(--gh-h) + var(--sub-h) + 16px)}

/* ---- phone tab bar ---------------------------------------------------------- */
.gtab{display:none}
@media (max-width:860px){
  :root{--gh-h:56px}
  .gh-nav{display:none}
  .gh-cta{margin-left:auto;padding:9px 13px}
  .gtab{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:2px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    font-family:'Open Sans',-apple-system,'Segoe UI',sans-serif;
    background:var(--gh-solid);border-top:1px solid var(--gh-line);box-shadow:var(--gh-shadow);
  }
  .gtab a{
    flex:1 1 0;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    border-radius:12px;font-size:11px;font-weight:700;color:var(--gh-dim);text-decoration:none;-webkit-tap-highlight-color:transparent;
  }
  .gtab a svg{width:21px;height:21px}
  .gtab a[aria-current="page"]{color:var(--gh-ink);background:rgba(var(--gh-acc-rgb),.16)}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .totop{bottom:calc(78px + env(safe-area-inset-bottom))!important}
  .subnav{padding:0 12px}
}
@media (max-width:400px){
  .gh-cta span{display:none}
  .gh-cta{padding:10px 11px}
}

/* ---- footer ------------------------------------------------------------------
   One row on a wide screen (mark · site links · profiles), one fine-print line
   under it. Centred and stacked on a phone, with 44px tap targets. ------------ */
.gf{
  margin-top:clamp(32px,5vw,56px);border-top:1px solid var(--gh-line);
  padding:22px clamp(16px,4vw,48px) 20px;
  font-family:'Open Sans',-apple-system,'Segoe UI',sans-serif;color:var(--gh-dim);
  background:rgba(var(--gh-tint),.015);
}
.gf-in{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 24px;
}
.gf .gh-mark{font-size:14px}
.gf .gh-mark i{width:26px;height:26px;border-radius:8px}
.gf-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px}
.gf-nav a{
  padding:6px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;
  color:var(--gh-dim);text-decoration:none;transition:color .2s ease,background .2s ease;
}
.gf-nav a:hover{color:var(--gh-ink);background:rgba(var(--gh-tint),.07)}
.gf-nav a[aria-current="page"]{color:var(--gh-ink)}
.gf-social{display:flex;gap:6px}
.gf-social a{
  width:34px;height:34px;display:grid;place-items:center;border-radius:999px;
  color:var(--gh-dim);background:rgba(var(--gh-tint),.05);border:1px solid var(--gh-line);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.gf-social a:hover{color:var(--gh-acc);border-color:rgba(var(--gh-acc-rgb),.45);background:rgba(var(--gh-tint),.09)}
.gf-social svg,.gf-social img{width:15px;height:15px}
.gf-note{
  grid-column:1/-1;margin:4px 0 0;padding-top:12px;border-top:1px dashed var(--gh-line);
  font-size:11.5px;line-height:1.6;color:var(--gh-faint);text-align:center;
}
@media (max-width:760px){
  /* mark and profiles share the first row; the links wrap under them */
  .gf{padding:16px 16px 14px}
  .gf-in{grid-template-columns:1fr auto;gap:8px 12px}
  .gf-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;margin:0 -10px}
  .gf-nav a{padding:10px}
  .gf-social a{width:42px;height:42px}
  .gf-social svg,.gf-social img{width:17px;height:17px}
  .gf-note{text-align:left;padding-top:10px}
}

/* ---- the CV: the same sub-navigation as every page, plus its two actions ----
   Sections on the left; on the right the view switch (A4 page / full width,
   icons only) and the PDF. 861-1239px folds Community and Languages into a
   More menu; from 1240px all eight sections fit. On a phone the sections
   scroll in one row, the PDF becomes a floating button above the tab bar and
   the A4 switch is hidden (an A4 sheet on a phone scrolls sideways). */
body.cv{padding-top:calc(var(--gh-h) + var(--sub-h))}
body.cv .sec{scroll-margin-top:calc(var(--gh-h) + var(--sub-h) + 12px)}
/* on screen, in full width, the site footer under the sheet replaces the
   document footer it would repeat; A4 page mode and paper keep it */
@media screen{body.cv.fluid .sheet > .foot{display:none}}
.subnav.cv-sub{overflow:visible}
.cv-jump{display:flex;align-items:center;gap:4px;min-width:0}
.cv-sub .cv-jump a.x{display:none}
.cv-more{position:relative;flex:0 0 auto}
.cv-more summary{
  list-style:none;cursor:pointer;padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--gh-dim);transition:color .2s ease,background .2s ease;
}
.cv-more summary::-webkit-details-marker{display:none}
.cv-more summary::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);
}
.cv-more summary:hover,.cv-more[open] summary,.cv-more.on summary{color:var(--gh-ink);background:rgba(var(--gh-acc-rgb),.16)}
.cv-more-m{
  position:absolute;top:calc(100% + 8px);left:0;z-index:61;min-width:170px;
  display:grid;gap:2px;padding:6px;border-radius:12px;
  background:var(--gh-solid);border:1px solid var(--gh-line);box-shadow:0 14px 34px rgba(0,0,0,.25);
}
.cv-sub .cv-more-m a{padding:9px 12px;border-radius:8px}
.cv-act{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-left:12px}
.cv-seg{display:flex;gap:2px;padding:2px;border-radius:999px;border:1px solid var(--gh-line);background:rgba(var(--gh-tint),.05)}
.cv-seg button{
  display:grid;place-items:center;width:34px;height:28px;padding:0;border:0;border-radius:999px;
  font-size:0;background:none;color:var(--gh-dim);cursor:pointer;transition:color .2s ease,background .2s ease;
}
.cv-seg button svg{width:15px;height:15px}
.cv-seg button:hover{color:var(--gh-ink)}
.cv-seg button[aria-pressed="true"]{color:var(--gh-ink);background:rgba(var(--gh-acc-rgb),.22)}
.cv-sub .cv-pdf{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--gh-on);background:var(--gh-grad);
  box-shadow:0 6px 18px rgba(0,161,224,.25);
}
.cv-sub .cv-pdf:hover{color:var(--gh-on);background:var(--gh-grad);filter:brightness(1.06)}
.cv-pdf svg{width:14px;height:14px}
@media (min-width:1240px){
  .cv-sub .cv-jump a.x{display:inline-block}
  .cv-more{display:none}
}
@media (max-width:860px){
  .subnav.cv-sub{overflow-x:auto;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--gh-solid)}
  .cv-sub .cv-jump a.x{display:inline-block}
  .cv-more,.cv-seg{display:none}
  .cv-act{padding-left:0}
  .cv-sub .cv-pdf{
    position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:58;
    width:52px;height:52px;padding:0;justify-content:center;box-shadow:0 10px 26px rgba(0,161,224,.42);
  }
  .cv-pdf span{display:none}
  .cv-pdf svg{width:20px;height:20px}
  body.cv .totop{display:none!important}
}

/* ---- text measure -------------------------------------------------------------
   A line must end where the reader can see why it ends. A section's lead
   paragraph shares its heading's column, so both break at the same edge; text
   inside a bordered box fills the box, so the box is the visible reason. No
   forced <br> in headings or prose. ---------------------------------------- */
.title,.sub{max-width:880px}
.title{text-wrap:balance}
p,li{text-wrap:pretty}
.note p,.cap p,.road p,.measured p,.lane p,.card p,.step p,.rule p,.ro-p,.qfoot,.gv-note,.ag-p{max-width:none}

/* a figure that links somewhere says so on hover */
a.stat-link{display:block;color:inherit;text-decoration:none;transition:background .2s ease}
a.stat-link:hover{background:rgba(var(--gh-acc-rgb),.08)}
a.stat-link span{transition:color .2s ease}
a.stat-link:hover span{color:var(--gh-acc)}

/* never on paper, never inside an embed */
@media print{.gh,.gtab,.subnav,.gf{display:none!important} body.cv{padding-top:0}}
body.embed .gh,body.embed .gtab,body.embed .subnav,body.embed .gf{display:none!important}
body.embed{padding-top:0!important}