/* Shared editorial identity. Loaded after legacy page styles so existing routes retain their structure. */
:root {
  --blue-ink:#10233f; --blue-navy:#102a4c; --blue-cobalt:#2457d6;
  --blue-paper:#f7f9fd; --blue-ice:#eaf1fc; --blue-muted:#4c607a;
  --blue-pale:#b9d0ff; --blue-rule:#ced9e9;
  --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --accent:#2457d6; --accent-soft:#b9d0ff;
  --bg:#102a4c; --bg-raise:#17365d; --bg-card:#17365d;
  --border:#345071; --border-soft:#345071; --fg:#fff; --muted:#d9e6ff;
  --dim:#b9d0ff; --fade:#b9d0ff;
}
html { background:var(--blue-paper); }
body { font-family:var(--sans); line-height:1.58; }
body.light {
  --bg:var(--blue-paper); --bg-raise:var(--blue-ice); --bg-card:#fff;
  --border:var(--blue-rule); --border-soft:var(--blue-rule);
  --fg:var(--blue-ink); --muted:var(--blue-muted); --dim:var(--blue-muted); --fade:var(--blue-muted);
  --accent:var(--blue-cobalt); --accent-soft:var(--blue-cobalt);
  --light-bg:var(--blue-paper); --light-ink:var(--blue-ink);
  --light-rule:var(--blue-rule); --light-moss:var(--blue-cobalt);
  background:var(--blue-paper); color:var(--blue-ink);
}
html:has(body.light) { background:var(--blue-paper); }
body.light p { color:var(--blue-muted); }
body.light .page { max-width:1160px; }
body.prose .page { max-width:880px; }
body.light:not(.story-home) .page { padding-top:clamp(64px,9vw,116px); }
body.light h1,body.light h2,body.light h3 { color:var(--blue-ink); }
body.light a { color:var(--blue-ink); border-bottom-color:var(--blue-cobalt); }
body.light a:hover { color:var(--blue-cobalt); }
body.light nav.top,body.light footer.site { max-width:1160px; }
body:not(.light) nav.top,body:not(.light) footer.site { font-family:var(--sans); letter-spacing:0; text-transform:none; font-size:14px; }
nav.top { gap:20px; align-items:center; padding-top:28px; }
nav.top ul { gap:12px 22px; }
nav.top .brand { font-size:17px; font-weight:750; letter-spacing:-.02em; }
body.light nav.top { font-size:14px; }
body.light nav.top .brand { font-size:17px; }
body.light nav.top a[aria-current="page"] { border-bottom-color:var(--blue-cobalt); }
footer.site { font-family:var(--sans); }
body.light footer.site { border-color:var(--blue-rule); }
body.light .about-next a,body.light .product-case,body.light .writing-featured-grid a,
body.light .work-card { border-color:var(--blue-rule)!important; background:#fff; }
body.light .product-case { background:var(--blue-ice); }
body.light .product-case img,body.light .work-card img { border-color:var(--blue-rule); }
body.light .home-primary-actions a { border-color:var(--blue-cobalt)!important; background:var(--blue-cobalt); }
body.light .home-primary-actions a+a { background:transparent; color:var(--blue-cobalt)!important; }
body.light .home-primary-actions a:hover { background:var(--blue-navy); color:#fff!important; }
body.light .home-proof,body.light .home-learn { background:var(--blue-ice); border-color:var(--blue-rule)!important; }
body.light .home-proof img { background:#fff; }
body.light .work-card-peeku strong,body.light .work-card-fuelsaathi strong { color:var(--blue-cobalt); }
body.light .earlier-work li span,body.light .product-case figcaption { color:var(--blue-muted); }
body.light .page p,body.light .page li { overflow-wrap:break-word; }
img { max-width:100%; }
:focus-visible { outline:3px solid var(--blue-cobalt); outline-offset:4px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:1000; padding:12px 16px; background:#fff; color:var(--blue-ink)!important; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
@media(max-width:720px) {
  nav.top { padding-inline:22px; }
  nav.top ul { width:100%; justify-content:flex-start; gap:8px 18px; }
  body.light:not(.story-home) .page { padding-inline:22px; }
}

/* Portfolio screenshots retain their original proportions and readable detail. */
.work-card-peeku img { height:auto; aspect-ratio:1.6; object-fit:contain; }
.work-card-fuelsaathi img { height:auto; aspect-ratio:1.6; object-fit:cover; object-position:center 43%; }
.product-case .product-shot-desktop img { height:auto; max-height:none; object-fit:contain; }
.product-case .product-shot-phone { justify-self:center; width:min(100%,300px); }
.product-case .product-shot-phone img { height:auto; max-height:none; object-fit:contain; }
.editorial-note { margin:24px 0 32px; padding:16px 20px; border-left:3px solid var(--blue-cobalt); background:var(--blue-ice); color:var(--blue-muted); font-size:15px; line-height:1.6; }