/* Phone layer. Everything here sits below the 768px breakpoint and only
   refines what index.html already lays out for a phone: the section rails
   laid flat, larger touch targets, the compact bar that follows the reader
   down the page, and the phone versions of the three exhibits that are too
   wide to fit (calendar years, the two funds, the all-time record).
   Same tokens as the rest of the site: #0F1419 ink, #14449E accent, #E4E7EB
   hairlines, Helvetica Neue, no radii, no shadows. */

.l42-mbar { display:none; }

@media (max-width: 767px) {

  html { -webkit-text-size-adjust:100%; }
  a, button { -webkit-tap-highlight-color:transparent; }

  /* ---- hero: shorter, so the opening paragraph is on the first screen ---- */
  #l42-hero > section { min-height:430px !important; }
  #l42-hero .l42-heroheader + div { min-height:0 !important; }
  #l42-page > .l42-m-only > div:first-child { margin-top:-44px; position:relative; }

  /* the masthead links keep their size but take a thumb-sized hit area */
  .l42-manager { position:relative; }
  .l42-manager::after { content:''; position:absolute; inset:-14px -10px; }

  /* ---- section rails: mark and label on one line ---- */
  .l42-rail { flex-direction:row !important; align-items:center; gap:14px !important; }
  .l42-rail > div:nth-child(2) { display:none; }       /* the accent rule */
  .l42-rail br { display:none; }
  .l42-rail > div:nth-child(3) { font-size:11px !important; line-height:1 !important; color:#4A525C !important; }

  /* section headings a step up, balanced over their lines */
  .l42-sec > div > h2 { font-size:24px !important; text-wrap:balance; }
  .l42-sec > div > h3 { font-size:21px !important; text-wrap:balance; }

  /* two stacked tables need air between them */
  .l42-cols { row-gap:40px !important; }

  /* process steps align with the text around them */
  .l42-process > div { padding:22px 0 24px !important; }

  /* the portrait becomes a byline, beside the name, not a full screen of face */
  .l42-bio > div:first-child { display:flex; align-items:flex-end; gap:16px; }
  .l42-bio > div:first-child > div { margin-top:0 !important; padding-bottom:2px; }
  .l42-bio .l42-slot { width:112px !important; flex:0 0 112px; }

  /* ---- segmented control: full width, even halves, taller ---- */
  .l42-seg { display:flex; width:100%; }
  .l42-seg button { flex:1 1 0; padding:12px 10px 11px; font-size:10.5px; }

  /* ---- factsheet download, full width ---- */
  .l42-btn-block { display:flex; justify-content:space-between; width:100%; padding:16px 18px; }

  /* ---- the compact bar that appears once the hero has scrolled away ---- */
  .l42-mbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
              position:fixed; top:0; left:0; right:0; z-index:50;
              padding:calc(env(safe-area-inset-top, 0px) + 13px) max(20px, calc((100vw - 390px) / 2)) 13px;
              background:rgba(255,255,255,0.94);
              -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
              border-bottom:1px solid #E4E7EB;
              transform:translateY(-101%); visibility:hidden;
              transition:transform 360ms cubic-bezier(.22,.7,.2,1), visibility 0s linear 360ms; }
  .l42-mbar.is-on { transform:none; visibility:visible;
                    transition:transform 360ms cubic-bezier(.22,.7,.2,1), visibility 0s; }
  .l42-mbar .l42-home svg { width:108px !important; }
  .l42-mbar nav { display:flex; gap:22px; }
  .l42-mbar .l42-manager { color:#0F1419; border-bottom-color:#C3C9D1; }
  html.l42-booting .l42-mbar, html.l42-lifting .l42-mbar { display:none; }

  /* ---- 04, calendar years on their side ---- */
  .l42-calm { border-top:1px solid #0F1419; }
  .l42-calm-row { padding:14px 0 16px; border-bottom:1px solid #E4E7EB; }
  .l42-calm-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
  .l42-calm-y { font:500 15px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif; color:#0F1419; }
  .l42-calm-d { font:400 12px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif; color:#5F6874; }
  .l42-calm-line { display:grid; grid-template-columns:minmax(0,1fr) 62px; gap:14px; align-items:center; margin-top:9px; }
  .l42-calm-track { position:relative; height:10px; background:#F4F6F8; }
  .l42-calm-bar { position:absolute; top:0; bottom:0; }
  .l42-calm-zero { position:absolute; top:-3px; bottom:-3px; width:1px; background:#0F1419; }
  .l42-calm-v { font:400 13px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif; text-align:right; white-space:nowrap; }

  /* ---- 08, the two funds as stacked figures ---- */
  .l42-fundm { margin-top:22px; border-top:1px solid #0F1419; }
  .l42-fundm-card { padding:18px 0 20px; border-bottom:1px solid #E4E7EB; }
  .l42-fundm-card:last-child { border-bottom-color:#0F1419; }
  .l42-fundm-t { font:500 17px/1.35 'Helvetica Neue',Helvetica,Arial,sans-serif; color:#0F1419; }
  .l42-fundm-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; margin-top:16px; }
  /* a label that wraps pushes its figure down; seat both figures on one line */
  .l42-fundm-grid > div { display:flex; flex-direction:column; justify-content:space-between; }
  .l42-fundm-k { font:500 10px/1.45 'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:0.09em; color:#6B7480; }
  .l42-fundm-v { font:500 19px/1.2 'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:-0.01em; margin-top:6px; }

  /* ---- 08, the all-time record in two narrow columns ---- */
  .l42-cmpm { margin-top:16px; }
  .l42-cmpm-win { font:400 10.5px/1.75 'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:0.07em; color:#6B7480; }
  .l42-cmpm-row { display:grid; grid-template-columns:minmax(0,1fr) 74px 74px; gap:10px; align-items:baseline;
                  padding:13px 0; border-bottom:1px solid #E4E7EB; }
  .l42-cmpm-hd { margin-top:14px; padding:0 0 10px; border-bottom-color:#0F1419; align-items:end;
                 font:500 10px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:0.09em; }
  .l42-cmpm-hd span { text-align:right; }
  .l42-cmpm-k { font:400 14.5px/1.35 'Helvetica Neue',Helvetica,Arial,sans-serif; color:#2A3138; }
  .l42-cmpm-si { font:400 15px/1.35 'Helvetica Neue',Helvetica,Arial,sans-serif; color:#4A525C; text-align:right; white-space:nowrap; }
  .l42-cmpm-fy { font:500 15px/1.35 'Helvetica Neue',Helvetica,Arial,sans-serif; color:#0F1419; text-align:right; white-space:nowrap; }
}