/* About: the homepage section system (service-page.css) over the Silk Road. Copy unchanged.
   Each part keeps its stretch of road through min-height; type uses only the homepage styles. */
.about-page .about-intro { padding-top:clamp(120px,15vw,240px); min-height:150svh; }
/* The page opener reads as a display line, bigger than the section headings (Huseyin, 2026-11-06). */
.about-intro h1 { grid-column:1 / -1; max-width:13ch; font-size:clamp(48px,7.2vw,128px); line-height:.98; }
.about-intro > p, .about-experience > p { grid-column:4 / 9; margin:clamp(40px,5vw,80px) 0 0; max-width:24ch; font-size:calc(var(--section-heading-size) * .9); line-height:1.08; }
.about-experience h2 { grid-column:1 / 4; }
.about-page .about-experience, .about-page .about-backers { min-height:110svh; }
/* Investors of our clients: heading above a full-width logo wall, like "Selected work" above its rows.
   Four logos a row, two columns each; rules only between rows. */
.about-backers h2 { grid-column:1 / -1; margin-bottom:clamp(48px,7vw,112px); }
.about-page ul.about-backer-logos { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 var(--grid-gap); margin:0; padding:0; list-style:none; mix-blend-mode:difference; } /* One blend layer for the grid, not one per logo. */
/* Investor logos: no rules between rows (Huseyin, 2026-11-06). */
.about-page ul.about-backer-logos > li { display:grid; place-items:center; min-height:clamp(88px,8vw,132px); margin:0; }
.about-page ul.about-backer-logos img { display:block; width:calc(var(--w) * 1px * var(--logo-scale,1)); height:auto; max-width:78%; filter:url(#logo-ink); }
.about-page ul.about-backer-logos img.is-baked { filter:none; } /* logo-bake.js baked the ink look into the bitmap */
@media (width < 1100px) { .about-page ul.about-backer-logos { --logo-scale:.85; } }
/* Meet us: the homepage founders section. Heading on column 2, statement on 4 to 8, portrait on 2 to 4. */
.about-page .about-founders { min-height:140svh; }
.about-founders h2 { grid-column:2 / 4; }
.about-founders > p { grid-column:4 / 9; grid-row:1; margin:clamp(40px,5vw,80px) 0 0; max-width:24ch; font-size:calc(var(--section-heading-size) * .9); line-height:1.08; }
.about-founders .about-portrait { grid-column:2 / 5; grid-row:2; width:100%; height:auto; margin-top:clamp(35px,5vw,80px); }
.about-founders .about-portrait img { display:block; width:100%; height:auto; }
.about-page .service-closing { min-height:90svh; align-content:center; padding-bottom:clamp(144px,14vw,220px); }

@media (width < 768px) {
 .about-page .about-intro { padding-top:144px; }
 .about-intro > p, .about-experience > p, .about-founders > p { margin:48px 0 0 12%; }
 .about-page ul.about-backer-logos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); --logo-scale:.72; }
 .about-page ul.about-backer-logos > li { min-height:84px; }
 .about-founders .about-portrait { width:76%; margin:48px 0 0; }
 .about-page .service-closing { padding-bottom:144px; }
}

/* Silk Road journey: fixed terrain behind the page, Xi'an to Sivas (assets/about-silk-road.js). */
.about-page .silk-road { position:fixed; inset:0; z-index:0; pointer-events:none; }
.about-page .silk-road canvas { display:block; width:100%; height:100%; }
.about-page .silk-road.silk-road-fallback { background:url("assets/about/silk-road/end.jpg") center / cover no-repeat; }
html[data-view="llm"] .about-page .silk-road { display:none; }
/* Everything on About renders like the hero: white with difference blending, so text, logos and
   rules invert against the page and the Silk Road beneath them. The portrait stays a photo.
   .service-content must not form its own stacking context, or the blend would only see itself. */
.about-page .service-content { position:relative; z-index:auto; }
.about-page .service-content :is(h1,h2,h3,p) { color:#fff; mix-blend-mode:difference; }
.about-page .sibling-guides { color:#fff; mix-blend-mode:difference; }
/* Footer over the Silk Road map: the page goes dark at the top while the map keeps a light ground lower down, so
   footer text and map outlines blend like the page content above (white, difference): white on dark, dark on light. */
.about-page .site-footer :is(.footer-heading, .footer-label, .footer-clock-time) { color:#fff; mix-blend-mode:difference; }
.about-page .site-footer .footer-clock svg { color:#fff; mix-blend-mode:difference; }
/* iOS (Safari and every iOS browser): text over the fixed WebGL terrain does not blend there and stays white on the
   light page. On iOS the About content draws in the colour the blend would give: ink on the light page, paper once
   the page turns dark for the footer. Logos go to ink the same way. */
@supports (-webkit-touch-callout: none) {
  .about-page .service-content :is(h1,h2,h3,p), .about-page .sibling-guides { color:#141414; mix-blend-mode:normal; }
  html.work-active .about-page .service-content :is(h1,h2,h3,p), html.work-active .about-page .sibling-guides { color:#F5F4F4; }
  .about-page ul.about-backer-logos, .about-page ul.about-backer-logos > li { mix-blend-mode:normal; }
  /* logo-bake.js turns each logo into white ink on transparent; brightness(0) makes that ink black. No SVG url()
     filter here: iOS does not combine it with other filter functions reliably. */
  .about-page ul.about-backer-logos img, .about-page ul.about-backer-logos img.is-baked { filter:brightness(0); }
  html.work-active .about-page ul.about-backer-logos img.is-baked { filter:none; }
  /* Footer: the map under it would need the same blend. On iOS the terrain steps aside while the page is dark, so the
     About footer is the plain black footer every other page has (and blends there correctly). */
  html.work-active .about-page .silk-road { display:none; }
}