/* ============================================================ Catalyst New India Fund — public site styles Palette: institutional ink + warm paper, single teal accent. Type: Spectral (display) + Public Sans (accessibility-first body). All pairs verified against WCAG 2.2 AA contrast. ============================================================ */ :root{ --ink:#14263D; --muted:#48576A; --paper:#FBFAF8; --surface:#FFFFFF; --line:#E4DED3; --line-strong:#C9C1B2; --accent:#0E5A66; --accent-strong:#0A464F; --brass:#8A5E1E; --danger:#8A1C1C; --success:#155C33; --focus:#0E5A66; --measure:68ch; --radius:6px; --section-y:clamp(3.5rem,8vw,6rem); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } body{ margin:0;background:var(--paper);color:var(--ink); font-family:"Public Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-underline-offset:.18em; } h1,h2,h3,h4{font-family:"Spectral",Georgia,"Times New Roman",serif;color:var(--ink);line-height:1.18;font-weight:600;margin:0 0 .5em;text-wrap:balance} h1{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.01em} h2{font-size:clamp(1.6rem,3.5vw,2.25rem)} h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:600} p{margin:0 0 1rem;max-width:var(--measure);text-wrap:pretty} /* --------------------------------------------------------------------------- Optional justified body text. Left-aligned (ragged right) is the default: it keeps word spacing even and is the accessible choice (WCAG 1.4.8 advises against justified text, which can create "rivers" of white space that hinder readers with dyslexia). To switch to justified, add class="justify" to the tag. --------------------------------------------------------------------------- */ body.justify .prose p, body.justify .split-body p, body.justify .section-head p, body.justify .disclaimer-item p, body.justify .disclosure-note{ text-align:justify; hyphens:auto; -webkit-hyphens:auto; } a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px} a:hover{color:var(--accent-strong);text-decoration-thickness:2px} :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px} img{max-width:100%;height:auto;display:block} .container{width:min(100% - 2.5rem,1120px);margin-inline:auto} .skip-link{position:absolute;left:.75rem;top:-4rem;z-index:1000;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius);text-decoration:none;font-weight:600;transition:top .15s ease} .skip-link:focus{top:.75rem;color:#fff} .eyebrow{font-family:"Public Sans",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 .75rem;display:flex;align-items:center;gap:.6rem} .eyebrow::before{content:"";width:1.75rem;height:2px;background:var(--brass);flex:none} .site-header{position:sticky;top:0;z-index:100;background:rgba(251,250,248,.92);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--line)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px} .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);font-family:"Spectral",serif} .brand:hover{color:var(--ink)} .brand .mark{width:38px;height:38px;flex:none;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.15rem;font-family:"Spectral",serif} .brand .name{font-size:1.15rem;font-weight:600;line-height:1.1} .brand .name small{display:block;font-family:"Public Sans",sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .brand-logo{height:38px;width:auto;max-width:220px;display:block} @media (max-width:480px){.brand-logo{height:32px}} .nav-toggle{display:none;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);font:inherit;font-weight:600;padding:.55rem .8rem;border-radius:var(--radius);cursor:pointer} .nav-toggle .bars{width:18px;height:2px;background:currentColor;position:relative;display:block} .nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor} .nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px} .primary-nav ul{list-style:none;display:flex;gap:.25rem;margin:0;padding:0;flex-wrap:wrap} .primary-nav a{display:inline-block;text-decoration:none;color:var(--ink);font-weight:500;font-size:.98rem;padding:.55rem .7rem;border-radius:var(--radius);border-bottom:2px solid transparent} .primary-nav a:hover{background:#F1EDE4;color:var(--ink)} .primary-nav a[aria-current="true"]{color:var(--accent-strong);border-bottom-color:var(--accent);font-weight:600} .hero{padding:var(--section-y) 0 calc(var(--section-y) - 1rem);border-bottom:1px solid var(--line)} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,5vw,3.5rem);align-items:center} .hero h1{margin-bottom:.6rem} .hero .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:52ch} .hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem} .btn{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-weight:600;cursor:pointer;padding:.8rem 1.35rem;border-radius:var(--radius);text-decoration:none;border:2px solid transparent} .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)} .btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff} .btn-secondary{background:transparent;color:var(--accent-strong);border-color:var(--line-strong)} .btn-secondary:hover{border-color:var(--accent);color:var(--accent-strong)} .factsheet{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.5rem 1.6rem;box-shadow:0 1px 0 var(--line)} .factsheet h2{font-size:.82rem;font-family:"Public Sans",sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 1rem;font-weight:700} .ledger{list-style:none;margin:0;padding:0} .ledger li,.ledger .row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.7rem 0;border-top:1px dashed var(--line-strong)} .ledger li:first-child,.ledger .row:first-child{border-top:0} .ledger dt,.ledger .k{color:var(--muted);font-size:.9rem} .ledger dd,.ledger .v{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums} section[aria-labelledby]{padding:var(--section-y) 0;border-bottom:1px solid var(--line)} .section-head{max-width:var(--measure);margin-bottom:2rem} .section-head p{color:var(--muted)} .prose-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem)} /* Full-width intro copy, held to a comfortable reading measure */ /* Full-width intro copy (About Us) */ .prose{max-width:none} .prose p{max-width:none} .prose p:last-child{margin-bottom:0} /* Image + content side by side (About -> "Who we are") */ .split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:center; margin-top:clamp(2rem,4vw,3rem); } /* If only the image or only the text is present, let it span the full width */ .split > :only-child{grid-column:1 / -1} .split-media{margin:0} .split-media img{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface)} .split-media figcaption{color:var(--muted);font-size:.9rem;margin-top:.6rem} .split-body h3{margin-top:0;margin-bottom:.75rem} /* Override the global paragraph measure so text fills its column */ .split-body p{max-width:none;margin-bottom:0} .card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.6rem} /* list-style/padding reset matters here: the browser default left padding on a