/* Lightpoint Ventures — V9 (2026-11). Visual system v4.
   Three colours: paper, navy, Lightpoint blue (#1f44d6, deliberately not a framework default).
   Source Serif 4 Regular for titles, italic for the clause that turns the sentence; Inter 17px for text.
   Grammar: a 12-column grid; sections with a label column on the left and content on the right;
   ledgers (ruled rows, serif name left, one sentence right) instead of cards or icons.
   Motion: one fade per section; nothing else. */
:root{
  --paper:#f4f1ea; --ink:#12161f; --ink-2:#434957; --ink-3:#62687a;
  --rule:rgba(18,22,31,.16); --blue:#1f44d6; --blue-soft:#9db2ff; --navy:#0c1530; --rule-w:rgba(255,255,255,.16);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1200px; --pad:40px; --gap:48px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.012em}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gap)}
.link{font-size:15.5px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
p+p{margin-top:1em}

/* nav */
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;text-decoration:none;letter-spacing:-.01em}
.brand svg{width:22px;height:22px}
.links{display:flex;align-items:center;gap:30px;font-size:15px;color:var(--ink-2)}
.links a{text-decoration:none;transition:color .15s}.links a:hover,.links a.active{color:var(--ink)}
.pill{border:1px solid var(--ink);border-radius:999px;padding:8px 16px;color:var(--ink)!important;transition:background .15s,color .15s}
.pill:hover{background:var(--ink);color:var(--paper)!important}

/* home hero: photograph left, blue panel right */
.hero{display:grid;grid-template-columns:5fr 7fr;min-height:600px}
.hero figure{position:relative;margin:0;overflow:hidden;background:var(--navy)}
.hero figure img,.hero figure picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero figcaption{position:absolute;left:24px;bottom:20px;font-size:12.5px;color:rgba(255,255,255,.88);letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero .panel{background:var(--blue);color:#fff;display:flex;align-items:center}
.hero .in{padding:80px max(var(--pad),calc(50vw - var(--max)/2 + var(--pad))) 80px 72px;max-width:calc(50vw - var(--max)/2 + var(--max)*.62 + 72px)}
.hero h1{font-size:clamp(44px,4.6vw,66px);line-height:1.04}
.hero p{font-size:19px;line-height:1.55;color:rgba(255,255,255,.88);margin-top:30px;max-width:30em}
.btns{display:flex;flex-wrap:wrap;gap:16px 20px;margin-top:40px}
.btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:999px;font-size:15.5px;font-weight:500;text-decoration:none;transition:background .15s,color .15s}
.btn.w{background:#fff;color:var(--blue)}.btn.w:hover{background:var(--navy);color:#fff}
.btn.o{border:1px solid rgba(255,255,255,.7);color:#fff}.btn.o:hover{background:#fff;color:var(--blue)}

/* inner page lead */
.lead{padding:112px 0 96px}
.lead .meta{grid-column:1/-1;font-size:14px;color:var(--ink-3);margin-bottom:22px}
.lead h1{grid-column:1/11;font-size:clamp(42px,4.6vw,64px);line-height:1.06}
.lead h1 em,.statement em,.fq blockquote em{color:var(--blue)}
.lead .lede{grid-column:1/9;font-size:19px;line-height:1.55;color:var(--ink-2);margin-top:28px;max-width:34em}

/* home statement */
.statement{padding:128px 0 112px}
.statement .big{grid-column:1/11;font-family:var(--serif);font-size:clamp(28px,2.8vw,40px);line-height:1.28;letter-spacing:-.01em}

/* sections: label column + body */
.sec{padding:112px 0;border-top:1px solid var(--rule)}
.label{grid-column:1/4;font-family:var(--serif);font-size:24px;line-height:1.3}
.body{grid-column:4/-1}
.dark{background:var(--navy);color:#fff;border-top:0;padding:120px 0}
.dark .label{color:#fff}

/* pairs (two short columns under a rule) */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap);border-top:1px solid var(--rule)}
.pair.free{grid-column:1/-1;margin-top:72px}
.pair>div{padding-top:24px}
.pair h3{font-size:24px;margin-bottom:8px}
.pair p{color:var(--ink-2);max-width:30em}
.pair .link{display:inline-block;margin-top:14px}
.dark .pair{border-color:var(--rule-w)}.dark .pair p{color:rgba(255,255,255,.8)}

/* portfolio */
.entry{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap);align-items:start}
.entry h2{font-size:clamp(40px,3.8vw,52px);line-height:1.02}
.tagrow{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;font-size:14px;color:var(--ink-3)}
.tagrow b{font-weight:500;color:var(--ink)}
.stealth{display:inline-flex;align-items:center;gap:8px}
.stealth::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.entry p{color:var(--ink-2);font-size:18px;line-height:1.6;padding-top:8px}
.more{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule);font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink-3)}

/* dark title block + ledger */
.dark-head h2{grid-column:1/8;font-size:clamp(36px,3.8vw,52px);line-height:1.08}
.dark-head h2 em{color:var(--blue-soft)}
.ledger{grid-column:1/-1;margin-top:72px;border-top:1px solid var(--rule-w)}
.ledger>div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gap);padding:26px 0;border-bottom:1px solid var(--rule-w);align-items:baseline}
.ledger h3{grid-column:1/6;font-size:clamp(24px,2.3vw,32px);line-height:1.15}
.ledger p{grid-column:6/-1;font-size:18px;color:rgba(255,255,255,.8)}
.body .ledger{margin-top:0}
.body .ledger>div{grid-template-columns:minmax(0,4fr) minmax(0,5fr)}
.body .ledger h3{grid-column:1;font-size:clamp(22px,2vw,28px)}.body .ledger p{grid-column:2}
.ledger.light{border-color:var(--rule)}.ledger.light>div{border-color:var(--rule)}.ledger.light p{color:var(--ink-2)}

.ledger.stack>div{grid-template-columns:1fr!important;padding:0 0 22px;margin-bottom:22px}.ledger.stack>div:first-child{padding-top:0}
.ledger.stack h3,.ledger.stack p{grid-column:1/-1!important}.ledger.stack h3{font-size:24px;margin-bottom:6px}

/* facts */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gap)}
.facts>div{padding:20px 0 22px;border-top:1px solid var(--rule)}
.dark .facts>div{border-color:var(--rule-w)}
.facts .l{font-size:13.5px;color:var(--ink-3)}.dark .facts .l{color:rgba(255,255,255,.62)}
.facts .v{font-family:var(--serif);font-size:22px;line-height:1.3;margin-top:6px}
.facts .v a{text-decoration:none;border-bottom:1px solid currentColor}

/* founder */
.founder .grid{align-items:center}
.portrait{grid-column:1/5;aspect-ratio:4/5;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 86%,86% 100%,0 100%);background:#ddd}
.portrait img,.portrait picture{display:block;width:100%;height:100%;object-fit:cover}
.fq{grid-column:6/-1}
.fq blockquote{font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);line-height:1.3;letter-spacing:-.01em}
.who{margin-top:32px;font-size:15.5px;color:var(--ink-2)}.who b{display:block;color:var(--ink);font-weight:600;font-size:16.5px}
.fq .link{display:inline-block;margin-top:22px}
.bio{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr);gap:0 var(--gap);align-items:start}
.bio .portrait{grid-column:auto}
.bio h3{font-size:28px}.bio .role{font-size:15px;color:var(--ink-3);margin:4px 0 22px}
.bio p{color:var(--ink-2)}
.bio .more-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}

/* contact band */
.contact{background:var(--blue);color:#fff;padding:96px 0}
.contact h2{grid-column:1/7;font-size:clamp(32px,3.2vw,44px);line-height:1.12}
.contact .r{grid-column:7/-1;align-self:end}
.contact .r p{color:rgba(255,255,255,.88);margin-bottom:14px;font-size:15.5px}
.mail{font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);color:inherit;text-decoration:none;border-bottom:1px solid currentColor;overflow-wrap:anywhere}

/* contact page */
.address{margin-top:32px;color:var(--ink-2);font-size:15.5px;line-height:1.75}.address .l{display:block;font-size:13.5px;color:var(--ink-3);margin-bottom:6px}

/* article */
.article-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--gap);align-items:start}
.aside{position:sticky;top:40px;font-size:14.5px;color:var(--ink-3);line-height:1.6}
.aside .who2{color:var(--ink);font-weight:500}
.aside .toc{margin-top:28px;padding-top:16px;border-top:1px solid var(--rule)}
.aside .toc a{display:block;text-decoration:none;color:var(--ink-3);padding:5px 0}.aside .toc a:hover{color:var(--ink)}
.aside .toc .l{font-size:13px;color:var(--ink-3);margin-bottom:6px}
.article{font-family:var(--serif);font-size:19px;line-height:1.62;max-width:36em}
.article h2{font-size:28px;font-style:italic;max-width:18em;margin:1.8em 0 .6em;scroll-margin-top:40px}
.article h2:first-child{margin-top:0}

/* footer */
footer{background:var(--navy);color:rgba(255,255,255,.62);font-size:14px;padding:44px 0 56px}
footer .grid>div{grid-column:span 3;line-height:1.75}
footer b{display:block;color:#fff;font-weight:500}
footer a{text-decoration:none}

/* motion */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* wide screens */
@media (min-width:1700px){
  :root{--max:1440px;--pad:56px;--gap:64px}
  body{font-size:18px}
  .hero{min-height:680px}.hero h1{font-size:clamp(44px,4.6vw,78px)}.hero p{font-size:21px}
  .lead h1{font-size:clamp(42px,4.6vw,76px)}.lead .lede{font-size:21px}
  .statement .big{font-size:clamp(28px,2.8vw,46px)}
  .article{font-size:20.5px}
}
@media (min-width:2100px){
  :root{--max:1640px;--pad:64px;--gap:72px}
  .hero{min-height:760px}.hero h1{font-size:clamp(44px,4.6vw,88px)}
  .lead h1{font-size:clamp(42px,4.6vw,86px)}
}

/* tablet and phone */
@media (max-width:960px){
  :root{--pad:24px;--gap:24px}
  body{font-size:16.5px}
  .links a:not(.pill){display:none}
  h1 br,h2 br{display:none}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero figure{height:260px;order:2}
  .hero .in{padding:56px var(--pad);max-width:none}
  .hero h1{font-size:42px}
  .lead{padding:72px 0 56px}
  .lead h1,.lead .lede{grid-column:1/-1}
  .statement{padding:80px 0}.statement .big{grid-column:1/-1;font-size:27px}
  .sec,.dark{padding:80px 0}
  .label,.body,.dark-head h2,.portrait,.fq,.contact h2,.contact .r{grid-column:1/-1}
  .label{margin-bottom:28px}
  .pair,.entry,.facts,.bio,.article-grid,.body .ledger>div{grid-template-columns:1fr}
  .pair.free{margin-top:48px}.pair>div+div{margin-top:28px}
  .entry p{margin-top:20px}
  .ledger{margin-top:48px}
  .ledger>div h3,.ledger>div p,.body .ledger h3,.body .ledger p{grid-column:1/-1}.ledger h3{margin-bottom:6px}
  .portrait{max-width:300px;margin-bottom:36px}
  .contact h2{margin-bottom:28px}
  .aside{position:static}.aside .toc{display:none}
  footer .grid>div{grid-column:1/-1;margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* Portfolio brief (/pearl): split hero on navy, one ledger. */
.hero.pearl .panel{background:var(--navy)}
.hero.pearl figure{background:#2a2a2c}
.hero.pearl h1 em{color:var(--blue-soft)}
.hero.pearl .tagrow{margin-top:36px;color:rgba(255,255,255,.7);font-size:15px}
.hero.pearl .tagrow b{color:#fff}
.hero.pearl .stealth::before{background:var(--blue-soft)}
.hero figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.sec.brief{border-top:0;padding:96px 0 112px}
.sec.brief .ledger{margin-top:0}
.sec.brief .ledger h3{grid-column:1/5}
.sec.brief .ledger p{grid-column:5/-1;max-width:40em}
.entry .link{display:inline-block;margin-top:18px}
@media(max-width:960px){.sec.brief{padding:56px 0 72px}.sec.brief .ledger h3,.sec.brief .ledger p{grid-column:1/-1}.sec.brief .ledger h3{margin-bottom:10px}}

/* Classes that replaced inline style attributes (CSP style-src has no 'unsafe-inline'). */
.reply{margin-top:36px;color:var(--ink-2);max-width:34em}
.article-sec{padding:8px 0 120px}
.pair.below{margin-top:48px}
.address.flush{margin-top:0}
.ledger.flush{margin-top:0;border-top:0}