/* JFS Enterprises — WordPress theme (carried over 1:1 from the static demo in corporate-sites/jfs/, 2026-10)
   Layout: warm paper, black ink, one serif family in light weights, hairline rules.
   Home is a single full-bleed screen; inner pages share one header + one-line footer.
   JFS yellow appears only on small tags ("New") — never as text colour. */

:root{
  --paper:#F5F3EE;
  --white:#FFFFFF;
  --ink:#111111;
  --ink-2:#5F5B53;
  --ink-3:#9A958B;
  --rule:#D9D5CC;
  --panel:#EFECE5;
  --yellow:#FFDE59;
  --err:#9B2C2C;

  --dark:#161514;
  --on-dark:#F2EFE8;
  --on-dark-2:#BDB7AC;
  --on-dark-rule:rgba(242,239,232,.2);
  --hero-glow:#7A5A2A;
  --hero-deep:#0E0D0C;
  --substack-bg:#171717;                /* JFS Insights' Substack theme (dark since 2026-10-18); the subscribe pop-up matches it */

  --ph-a:#E9E5DD;
  --ph-b:#F1EEE8;
  --ph-line:#B9B3A8;

  --serif:'Newsreader','Noto Serif SC','Songti SC',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue','PingFang SC','Noto Sans SC',Arial,sans-serif;

  --pad:clamp(16px,4vw,48px);
  --hdr:84px;                           /* header height */
  --band:clamp(460px,68vh,680px);       /* opening image on Insights, Ventures and About — one height for all three */
  --max:1280px;
  color-scheme:light;
}

/* ── language ───────────────────────────────────────── */
:root[data-lang="en"] .lz{display:none}
:root[data-lang="zh"] .le{display:none}

/* ── base ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable; background:var(--paper)}
html:has(body.home){background:var(--dark)}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-weight:300; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:300; text-wrap:balance}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:focus-visible{outline:2px solid currentColor; outline-offset:3px}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.small{font-size:13px; color:var(--ink-2)}

/* "→" link with a drawn line, as on a16z */
.more{display:inline-flex; align-items:center; gap:12px; font-size:15px}
.more::after{content:""; width:40px; height:1px; background:currentColor; transition:width .25s ease}
.more:hover::after{width:56px}

.btn{display:inline-block; border:1px solid currentColor; padding:8px 18px; font-size:14px; letter-spacing:.03em; white-space:nowrap; transition:background .2s, color .2s}
.btn:hover{background:var(--ink); color:var(--paper)}

.tag-new{font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.02em; background:var(--yellow); color:var(--ink); padding:1px 6px; margin-right:8px; vertical-align:3px}

/* image placeholder (until real images arrive) */
.ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; width:100%;
  background:repeating-linear-gradient(135deg,var(--ph-a) 0 9px,var(--ph-b) 9px 18px); box-shadow:inset 0 0 0 1px var(--ph-line);
  color:var(--ink-2); font-family:var(--sans); font-size:12px; padding:12px}
.ph b{font-weight:600; letter-spacing:.06em; background:var(--ink); color:var(--yellow); padding:1px 8px}
.r43{aspect-ratio:4/3}
.r54{aspect-ratio:5/4}
.r31{aspect-ratio:3/1}
.r45{aspect-ratio:4/5}
.r169{aspect-ratio:16/9}

/* ── language toggle ───────────────────────────────── */
.lang{display:flex; align-items:center; gap:2px; font-family:var(--sans); font-size:12px; letter-spacing:.06em}
.lang .sep{opacity:.4}
.lang a{padding:4px 6px; opacity:.5}
.lang a.on{opacity:1}
.lang a:hover{opacity:1}

/* Chinese: Noto Serif SC (思源宋体) in the same light weights as Newsreader */
:root[data-lang="zh"] body{letter-spacing:.02em}
:root[data-lang="zh"] h1, :root[data-lang="zh"] h2{letter-spacing:.01em; line-height:1.25}
/* ch is a Latin measure; CJK lines need an em-based width */
:root[data-lang="zh"] .about-h, :root[data-lang="zh"] .ahead h1{max-width:15em}

/* ── header (inner pages) ──────────────────────────── */
.hdr{position:fixed; top:0; left:0; right:0; z-index:20; padding-top:env(safe-area-inset-top,0px); color:var(--on-dark); background:var(--dark); transition:background .3s ease}
.hdr-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; min-height:var(--hdr)}
/* over an opening image the header starts transparent (with a light veil, as on the home page) and turns solid once the image has scrolled away */
body.has-hero .hdr{background:transparent}
body.has-hero .hdr::before{content:""; position:absolute; inset:0 0 -60px 0; z-index:-1; pointer-events:none; transition:opacity .3s;
  background:linear-gradient(to bottom, rgba(14,13,12,.45) 0%, rgba(14,13,12,.18) 55%, rgba(14,13,12,0) 100%)}
body.has-hero .hdr.solid{background:var(--dark)}
body.has-hero .hdr.solid::before{opacity:0}
body:not(.home):not(.has-hero){padding-top:var(--hdr)}
.nav{display:flex; gap:28px; font-size:15px}
.nav a{padding-block:4px}
.nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 currentColor}
.logo img{height:46px; width:auto; transform:translateX(7%)}   /* optical centring: the swash at the top right pulls the box, the letters sit ~8% left of it */
.hdr-r{display:flex; justify-content:flex-end; align-items:center; gap:16px}
.burger{display:none; width:22px; height:14px; position:relative}
.burger i{position:absolute; left:0; right:0; height:1px; background:currentColor; transition:transform .2s, top .2s}
.burger i:first-child{top:2px}
.burger i:last-child{top:11px}
.burger[aria-expanded="true"] i:first-child{top:7px; transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{top:7px; transform:rotate(-45deg)}

/* ── footer (inner pages) ──────────────────────────── */
.ftr{border-top:1px solid var(--rule); margin-top:96px}
.ftr-in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 32px; padding-block:28px; font-size:13px; color:var(--ink-2)}
.ftr-in nav{display:flex; gap:10px}
.ftr-in nav a + a::before{content:"·"; margin-right:10px}
.ftr-in a:hover{color:var(--ink)}

/* ── HOME: one screen ──────────────────────────────── */
body.home{background:var(--dark)}
.screen{position:relative; min-height:100vh; min-height:100svh; display:grid; grid-template-rows:1fr auto; padding-top:var(--hdr); color:var(--on-dark); overflow:hidden; isolation:isolate}
/* temporary art until IMG-01 arrives; replace with background-image:url(../img/hero.jpg) */
.screen-bg{position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 55% 70% at 72% 38%, var(--hero-glow) 0%, transparent 60%),
    radial-gradient(ellipse 35% 45% at 28% 18%, rgba(122,90,42,.35) 0%, transparent 70%),
    linear-gradient(160deg, #2A241D 0%, var(--hero-deep) 70%);
  background-size:cover; background-position:center}
.screen::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(14,13,12,.75) 0%, rgba(14,13,12,0) 55%)}
/* light veil behind the header, so the logo and menu stay legible when the video turns bright */
/* (the veil behind the header comes from .hdr::before, shared by every page) */
video.screen-bg{width:100%; height:100%; object-fit:cover}
/* Home without a video or image: a flowing glow in the manner of Apple's dynamic wallpapers (2026-10-18, Jimmy).
   Four warm lights, each on its own curved path and period (19/23/29/34 s, never in step), blend where they meet
   (mix-blend-mode screen). Only transform and opacity move, so it stays smooth; still if the visitor asks for reduced motion. */
.screen-bg.flow{background:linear-gradient(160deg, #2A241D 0%, var(--hero-deep) 70%); overflow:hidden;
  --flow-1:var(--hero-glow); --flow-2:#A8742E; --flow-3:#8A4429; --flow-4:#646A3A}
.screen-bg.flow i{position:absolute; width:78vmax; height:78vmax; border-radius:50%; mix-blend-mode:screen; will-change:transform, opacity;
  animation:22s ease-in-out infinite alternate}
.screen-bg.flow i:nth-child(1){left:38%; top:-22%; background:radial-gradient(circle, var(--flow-1) 0%, color-mix(in srgb, var(--flow-1) 45%, transparent) 30%, color-mix(in srgb, var(--flow-1) 12%, transparent) 50%, transparent 68%); animation-name:flow-1; animation-duration:19s}
.screen-bg.flow i:nth-child(2){left:-28%; top:-38%; width:62vmax; height:62vmax; background:radial-gradient(circle, var(--flow-2) 0%, color-mix(in srgb, var(--flow-2) 45%, transparent) 30%, color-mix(in srgb, var(--flow-2) 12%, transparent) 50%, transparent 68%); opacity:.7; animation-name:flow-2; animation-duration:23s}
.screen-bg.flow i:nth-child(3){left:52%; top:30%; width:66vmax; height:66vmax; background:radial-gradient(circle, var(--flow-3) 0%, color-mix(in srgb, var(--flow-3) 45%, transparent) 30%, color-mix(in srgb, var(--flow-3) 12%, transparent) 50%, transparent 68%); opacity:.85; animation-name:flow-3; animation-duration:29s}
.screen-bg.flow i:nth-child(4){left:-8%; top:20%; width:70vmax; height:70vmax; background:radial-gradient(circle, var(--flow-4) 0%, color-mix(in srgb, var(--flow-4) 45%, transparent) 30%, color-mix(in srgb, var(--flow-4) 12%, transparent) 50%, transparent 68%); opacity:.6; animation-name:flow-4; animation-duration:34s}
@keyframes flow-1{0%{transform:translate(0,0) scale(1)} 33%{transform:translate(-18%,14%) scale(1.15)} 66%{transform:translate(-6%,26%) scale(.9)} 100%{transform:translate(10%,6%) scale(1.08)}}
@keyframes flow-2{0%{transform:translate(0,0) scale(1); opacity:.7} 33%{transform:translate(26%,18%) scale(1.2); opacity:.45} 66%{transform:translate(40%,4%) scale(.95); opacity:.75} 100%{transform:translate(14%,30%) scale(1.1); opacity:.55}}
@keyframes flow-3{0%{transform:translate(0,0) scale(1); opacity:.85} 33%{transform:translate(-30%,-14%) scale(1.1); opacity:.6} 66%{transform:translate(-44%,-30%) scale(1.25); opacity:.9} 100%{transform:translate(-14%,-36%) scale(.95); opacity:.7}}
@keyframes flow-4{0%{transform:translate(0,0) scale(1); opacity:.6} 33%{transform:translate(22%,-24%) scale(.9); opacity:.35} 66%{transform:translate(48%,-10%) scale(1.15); opacity:.65} 100%{transform:translate(30%,-34%) scale(1.05); opacity:.45}}
@media (prefers-reduced-motion:reduce){ .screen-bg.flow i{animation:none} }
.screen-tag{display:none; position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); font-family:var(--sans); font-size:11px; letter-spacing:.06em; color:var(--on-dark-2); border:1px dashed var(--on-dark-rule); padding:6px 10px}
.screen > .wrap{width:100%}  /* auto inline margins would shrink grid items */
.screen .btn:hover{background:var(--on-dark); color:var(--ink)}
.hero{align-self:end; padding-bottom:56px; display:grid; gap:22px; max-width:900px}
.hero h1{font-size:clamp(40px,6.4vw,84px); line-height:1.02; letter-spacing:-.015em}
.hero .epi{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:clamp(15px,1.4vw,18px); color:var(--on-dark-2); margin:0 0 -4px}
.hero .epi em{font-style:italic; color:var(--on-dark)}
/* the same epigraph above the Insights title: on the opening band (coming soon) and on the paper list page */
.band-in .epi{font-size:clamp(15px,1.4vw,18px); color:var(--on-dark-2); margin-bottom:-4px}
.band-in .epi em{font-style:italic; color:var(--on-dark)}
.ins-head{display:grid; gap:14px}
.ins-head .epi{font-size:clamp(15px,1.4vw,18px); color:var(--ink-2)}
.ins-head .epi em{font-style:italic}
.hero-links{display:flex; flex-wrap:wrap; gap:14px 40px}
.screen-ftr{border-top:1px solid var(--on-dark-rule)}
.screen-ftr .ftr-in{color:var(--on-dark-2)}
.screen-ftr .ftr-in a:hover{color:var(--on-dark)}

/* ── opening band: Insights, Ventures, About ───────── */
.band{position:relative; height:var(--band); overflow:hidden; isolation:isolate; color:var(--on-dark); background:var(--dark)}
.band .screen-bg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center}
.band::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(14,13,12,.7) 0%, rgba(14,13,12,0) 60%)}
.band-in{position:absolute; left:0; right:0; bottom:56px; display:grid; gap:16px}
.band-in h1{font-size:clamp(44px,5.6vw,76px); line-height:1.02; letter-spacing:-.015em}
.band-in p{max-width:40em; color:var(--on-dark-2); font-size:19px; line-height:1.5}
.band-tag{position:absolute; right:var(--pad); top:calc(var(--hdr) + 24px); font-family:var(--sans); font-size:11px; letter-spacing:.06em; color:var(--on-dark-2); border:1px dashed var(--on-dark-rule); padding:6px 10px}

/* ── page head ─────────────────────────────────────── */
.phead{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:end; padding-block:72px 40px; border-bottom:1px solid var(--rule)}
.phead h1{font-size:clamp(40px,5vw,64px); line-height:1.05; letter-spacing:-.01em}
.phead p{color:var(--ink-2); max-width:46ch}

/* ── VENTURES ──────────────────────────────────────── */
.vgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; padding-top:64px}
.vcard{display:grid; grid-template-rows:auto auto 1fr auto; gap:14px; align-content:start}   /* name · line · address line up across the row */
.vname{font-size:24px; line-height:1.15; font-weight:400; margin-top:6px}
.vline{color:var(--ink-2); font-size:16px; line-height:1.55; max-width:34em}
.vcard img{width:100%; height:auto; background:var(--dark); transition:opacity .3s ease}
.vcard:hover img{opacity:.92}
.vcard:hover .more::after{width:56px}
.vrow{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:center; padding-block:48px; border-bottom:1px solid var(--rule)}
.vrow:last-child{border-bottom:0}
.vrow > div{display:grid; gap:12px; align-content:center}
.vrow h2{font-size:clamp(30px,3.2vw,42px); line-height:1.1}
.vrow p{color:var(--ink-2); max-width:38ch}
.kicker{font-size:13px; color:var(--ink-2)}

/* ── INSIGHTS: featured carousel (a16z) ─────────────── */
.fx{position:relative; height:var(--band); overflow:hidden; background:var(--dark); isolation:isolate}
.fx-media,.fx-img{position:absolute; inset:0}
.fx-img{opacity:0; transition:opacity .9s ease;
  background:radial-gradient(ellipse 50% 70% at 75% 40%, var(--hero-glow) 0%, transparent 60%), linear-gradient(160deg,#2A241D 0%,var(--hero-deep) 70%)}
.fx-img.is-on{opacity:1}
.fx-img img{width:100%; height:100%; object-fit:cover; display:block}
.fx-wrap{position:relative; height:100%; display:flex; align-items:flex-end}
.fx-panel{position:relative; width:min(520px,100%); height:calc(100% - var(--hdr) - 24px); display:grid; grid-template-rows:1fr auto;
  background:rgba(245,243,238,.84); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--ink)}
.fx-text{grid-row:1; grid-column:1; padding:clamp(28px,4vw,56px) clamp(24px,4vw,56px) 16px; display:grid; gap:16px; align-content:center;
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s .5s}
.fx-text.is-on{opacity:1; visibility:visible; transition:opacity .5s ease .2s}
.fx-text h2{font-size:clamp(30px,3.4vw,48px); line-height:1.08; letter-spacing:-.01em}
.fx-text p{color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.fx-text:hover .more::after{width:56px}
.fx-pager{grid-row:2; display:flex; align-items:center; justify-content:space-between; padding:16px clamp(24px,4vw,56px) 24px; font-family:var(--sans); font-size:13px; letter-spacing:.06em; color:var(--ink-2)}
.fx-pager b{font-weight:400; color:var(--ink)}
.fx-pager button{font-size:24px; line-height:1; padding:4px 10px; color:var(--ink)}
.fx-pager button:hover{opacity:.6}
.ins-tools .btn{margin-left:8px}

/* ── SUBSCRIBE POP-UP (Substack sign-up box, as on a16z.com) ── */
.ia-sheet.sub-sheet{width:min(600px,100%); padding:44px 16px 16px; background:var(--substack-bg); color:var(--on-dark)}  /* same colour as the Substack box inside */
.sub-sheet .ia-x{color:var(--on-dark-2)}
.sub-sheet .ia-x:hover{color:var(--on-dark)}
.sub-sheet iframe{display:block; width:100%; height:300px; border:0; background:transparent}

/* ── INSIGHTS ──────────────────────────────────────── */
.feature{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); background:var(--white); margin-top:40px}
.feature > div:first-child{padding:clamp(24px,4vw,48px); display:grid; gap:16px; align-content:center}
.feature h2{font-size:clamp(28px,3vw,40px); line-height:1.1}
.feature p{color:var(--ink-2)}
.feature--text{grid-template-columns:minmax(0,1fr)}
.feature-img{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover}
.vcard img,.team img{width:100%; height:auto; object-fit:cover}
.ins-bar{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:24px; padding-block:64px 24px}
.ins-bar h1{font-size:clamp(40px,5vw,64px); line-height:1}
.ins-tools{display:flex; align-items:end; gap:24px}
.select{position:relative; min-width:200px; border-bottom:1px solid var(--ink)}
.select select{appearance:none; -webkit-appearance:none; width:100%; background:transparent; border:0; font:inherit; font-size:15px; padding:6px 24px 6px 0; color:var(--ink); cursor:pointer}
.select::after{content:"⌄"; position:absolute; right:2px; top:2px; pointer-events:none}
.list{display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--rule)}
.item{border-top:1px solid var(--rule)}
.item a{display:grid; grid-template-columns:180px minmax(0,1fr) auto; gap:8px 32px; align-items:baseline; padding:22px 0}
.item h3{font-size:24px; line-height:1.25; font-weight:400}
.item a:hover h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.item .small{color:var(--ink-2)}
.empty{grid-column:1/-1; color:var(--ink-2); padding:24px 0}

.subscribe{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; background:var(--white); padding:clamp(24px,4vw,48px); margin-top:64px; scroll-margin-top:100px}
.subscribe h2{font-size:clamp(26px,2.6vw,34px); line-height:1.15}
.subscribe form{display:flex; gap:12px; align-items:end}
.subscribe input{flex:1; min-width:0; border:0; border-bottom:1px solid var(--ink); background:transparent; font:inherit; font-size:16px; padding:8px 0; color:var(--ink)}
.subscribe input::placeholder{color:var(--ink-3)}
.subscribe .note{grid-column:1/-1; font-size:13px; color:var(--ink-2)}
.subscribe > div{justify-self:end}
.btn-ink{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-ink:hover{background:transparent; color:var(--ink)}

.pager{display:flex; gap:6px; justify-content:center; padding-top:32px; font-family:var(--sans); font-size:14px}
.pager a,.pager span{min-width:36px; padding:6px 10px; text-align:center; border:1px solid transparent}
.pager .current{border-color:var(--ink)}
.pager a:hover{border-color:var(--rule)}

/* ── ARTICLE ───────────────────────────────────────── */
.ahead{background:var(--white); border-bottom:1px solid var(--rule)}
.ahead-in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:end; padding-block:56px 32px}
.ahead-in > div{display:grid; gap:12px}
.ahead h1{font-size:clamp(34px,4.4vw,56px); line-height:1.06; letter-spacing:-.01em; max-width:20ch}
.abody-bg{background:var(--white)}
.abody{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,6fr) minmax(0,3fr); gap:48px; padding-block:48px 72px}
.share{font-family:var(--sans); font-size:13px; color:var(--ink-2); align-self:start; position:sticky; top:110px}
.share button:hover{color:var(--ink)}
.prose{display:grid; gap:22px; font-size:19px; line-height:1.75; max-width:62ch}
.prose figure{margin:8px 0}
.prose figcaption{font-size:13px; color:var(--ink-2); margin-top:8px}
.prose > *{margin:0}
.prose h2{font-size:30px; font-weight:400; line-height:1.2; margin-top:18px}
.prose h3{font-size:23px; font-weight:400; line-height:1.3; margin-top:10px}
.prose a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.prose ul,.prose ol{padding-left:1.2em; display:grid; gap:8px}
.prose blockquote{border-left:2px solid var(--ink); padding-left:24px; font-style:italic}
.prose blockquote cite{display:block; font-style:normal; font-size:14px; color:var(--ink-2); margin-top:8px}
.prose img{width:100%; height:auto}
.prose hr{border:0; border-top:1px solid var(--rule); margin-block:12px}
.prose .wp-block-embed iframe{width:100%; aspect-ratio:16/9; height:auto}
.prose .wp-block-image{margin-block:8px}
.ftr--flush{margin-top:0}
.rail{display:grid; gap:16px; align-content:start; border-top:1px solid var(--rule); padding-top:16px}
.rail a h3{font-size:17px; line-height:1.35; font-weight:400}
.rail a:hover h3{text-decoration:underline; text-underline-offset:3px}

/* ── ABOUT (a16z: full-screen emblem, then words) ──── */
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ab{display:grid; grid-template-columns:minmax(0,1fr); gap:88px; padding-top:88px}
.ab-text, .ab-sec{min-width:0}
.ab-text{display:grid; gap:22px}
.ab-text > p{font-size:21px; line-height:1.65; color:var(--ink); max-width:40em}
.ab-text > h2,.ab-label{font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-top:56px; padding-bottom:14px; border-bottom:1px solid var(--ink)}
.ab-label{margin-top:0}
.ab-text > ol{list-style:none; margin:0; padding:0; counter-reset:ab; display:grid}
.ab-text > ol > li{counter-increment:ab; display:grid; grid-template-columns:80px minmax(0,46em); gap:0 24px; padding:28px 0; border-bottom:1px solid var(--rule); font-size:18px; line-height:1.65; color:var(--ink-2)}
.ab-text > ol > li::before{content:counter(ab); grid-row:span 2; font-size:56px; line-height:.9; color:var(--ink)}
.ab-text > ol > li strong{display:block; font-weight:400; font-size:clamp(24px,2.4vw,30px); line-height:1.25; color:var(--ink); margin-bottom:10px}
.ab-sec{display:grid; gap:24px}
.ab-rows{display:grid}
.ab-row{display:grid; grid-template-columns:180px minmax(0,1fr) auto; gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--rule)}
.ab-name{font-size:30px; line-height:1.2}
.ab-row:hover .more::after{width:56px}
.ab-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
.ab-grid > div{display:grid; gap:6px; align-content:start}
.ab-grid p{font-size:19px; line-height:1.4; overflow-wrap:anywhere}
.ab-grid a:hover{text-decoration:underline; text-underline-offset:4px}

/* ── ABOUT ─────────────────────────────────────────── */
.about-h{font-size:clamp(34px,4.4vw,56px); line-height:1.08; letter-spacing:-.01em; max-width:20ch; padding-block:72px 56px}
.team{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
.team > div{display:grid; gap:6px}
.team h3{font-size:20px; font-weight:400; margin-top:6px}
.team .ghost{opacity:.45}
.contact{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-top:72px}
.contact > div{border-top:1px solid var(--rule); padding-top:16px; display:grid; gap:4px}
.contact a{font-size:20px}
.contact a:hover{text-decoration:underline; text-underline-offset:4px}

/* ── PRIVACY / legal ───────────────────────────────── */
.legal-head{display:grid; gap:12px; padding-block:72px 40px; border-bottom:1px solid var(--rule)}
.legal-head h1{font-size:clamp(40px,5vw,64px); line-height:1.05; letter-spacing:-.01em}
.legal-body{display:grid; gap:40px; max-width:66ch; padding-top:48px}
.legal-body section{display:grid; gap:12px}
.legal-body h2{font-size:24px; font-weight:400}
.legal-body p{color:var(--ink-2)}
.legal-body:not(:has(> section)){gap:14px}
.legal-body .wp-block-heading{margin:0}
.legal-body p + h2{margin-top:30px}
.legal-body a{color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}

/* ── INVESTOR ACCESS SHEET (rises from the bottom) ─── */
.ia{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:16px; visibility:hidden; transition:visibility 0s .4s}
.ia.open{visibility:visible; transition:none}
.ia-dim{position:absolute; inset:0; background:rgba(14,13,12,.5); opacity:0; transition:opacity .35s ease}
.ia.open .ia-dim{opacity:1}
.ia-sheet{position:relative; width:min(520px,100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--paper); color:var(--ink); display:grid; gap:18px;
  padding:40px clamp(20px,5vw,44px) 32px; opacity:0; transform:translateY(32px);
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1)}
.ia.open .ia-sheet{opacity:1; transform:none}
.ia-x{position:absolute; top:16px; right:18px; font-family:var(--sans); font-size:22px; line-height:1; color:var(--ink-2); padding:6px}
.ia-x:hover{color:var(--ink)}
.ia-sheet h2{font-size:32px; line-height:1.15}
.ia-form{display:flex; gap:12px; align-items:end; margin-top:6px}
.ia-form input{flex:1 1 0; width:0; min-width:0; border:0; border-bottom:1px solid var(--ink); background:transparent; color:var(--ink);
  font-family:ui-monospace,Menlo,monospace; font-size:20px; letter-spacing:.18em; text-transform:uppercase; padding:8px 0}
.ia-form input:focus{outline:none; border-bottom-width:2px}
.ia-form .btn{background:var(--ink); color:var(--paper); border-color:var(--ink); font-size:15px}
.ia-form .btn[disabled]{opacity:.5}
.ia-msg{min-height:20px; font-size:14px; color:var(--err)}
.ia-foot{font-size:13px; color:var(--ink-2); border-top:1px solid var(--rule); padding-top:14px}
.ia-foot a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

/* ── tablet ────────────────────────────────────────── */
@media (max-width:1100px){
  .ab-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 32px}
  .ab-grid p{font-size:17px}
  .nav{gap:20px}
}

/* ── mobile ────────────────────────────────────────── */
@media (max-width:820px){
  :root{--hdr:64px; --band:clamp(380px,58vh,520px)}
  .burger{display:block}
  .hdr-in{grid-template-columns:1fr auto 1fr}   /* equal side columns keep the logo on the true centre */
  .burger{justify-self:start}
  .logo{justify-self:center}
  .logo img{height:38px}
  .hdr-r .btn{display:none}
  /* menu: a full-height panel from the left, items in the serif (after a16z.com); the page behind is dimmed */
  .nav{position:fixed; inset:0 auto 0 0; z-index:30; width:min(420px,100%); flex-direction:column; justify-content:flex-start; gap:0;
    padding:96px 32px 32px; background:var(--panel); color:var(--ink); font-size:26px; line-height:1.2; overflow-y:auto;
    transform:translateX(-100%); visibility:hidden; box-shadow:0 0 0 100vmax rgba(14,13,12,0);   /* the dim keeps its size and only fades: growing it from 0 flashed a dark sliver at the left edge */
    transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s, box-shadow .35s}
  .nav.open{transform:none; visibility:visible; box-shadow:0 0 0 100vmax rgba(14,13,12,.35); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
  .nav > a{padding:14px 0; border-bottom:1px solid var(--rule)}
  .nav > a[aria-current="page"]{box-shadow:none; color:var(--ink)}
  .nav > a:not([aria-current="page"]){color:var(--ink-2)}
  .burger{position:relative; z-index:31}
  .burger[aria-expanded="true"]{color:var(--ink)}
  .phead,.vrow,.feature,.subscribe,.abody,.ahead-in{grid-template-columns:1fr}
  .vrow{gap:20px; padding-block:32px}
  .item a{grid-template-columns:1fr; gap:6px}
  .ab{gap:64px; padding-top:56px}
  .ab-text > ol > li{grid-template-columns:48px minmax(0,1fr); gap:0 14px}
  .ab-text > ol > li::before{font-size:38px}
  .ab-row{grid-template-columns:1fr; gap:4px}
  .ab-grid{grid-template-columns:minmax(0,1fr); gap:20px}
  .fx{height:auto; display:grid}
  .fx-media{position:relative; inset:auto; height:var(--band)}
  .fx-wrap{padding-inline:0}
  .fx-panel{width:100%; height:auto; min-height:300px; background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none}
  .fx-text{padding:28px 16px 8px}
  .fx-pager{padding:12px 16px 20px}
  .ins-tools{flex-wrap:wrap}
  .vgrid{grid-template-columns:1fr; gap:40px}
  .share{position:static}
  .team{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .hero{padding-bottom:40px}
  .hero-links{flex-direction:column; align-items:flex-start; gap:16px}   /* one link per line on phones */
  .screen-tag{top:84px; transform:none}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ── INVESTORS page: access code + request form ───── */
.inv{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px 72px; padding-top:88px; align-items:start}
.inv-sec{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; min-width:0}   /* one column that never grows past its box */
.inv-lead{font-size:19px; line-height:1.55; color:var(--ink); max-width:34em}
.inv-done{border-left:2px solid var(--ink); padding-left:18px}
.inv-form{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px 28px; margin-top:4px}
.inv-form label{display:grid; gap:6px; min-width:0}
.inv-form .wide{grid-column:1/-1}
.inv-form input,.inv-form textarea{width:100%; border:0; border-bottom:1px solid var(--ink); background:transparent; font:inherit; font-size:17px; padding:6px 0; color:var(--ink); border-radius:0}
.inv-form textarea{resize:vertical; min-height:96px; border:1px solid var(--rule); padding:10px 12px}
.inv-form input:focus,.inv-form textarea:focus,.inv-form select:focus{outline:none; border-color:var(--ink); box-shadow:inset 0 -1px 0 var(--ink)}
.inv-form .select{min-width:0}
.inv-send{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px}
.inv-send a,.inv-note a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.inv-note{grid-column:1/-1; border-top:1px solid var(--rule); padding-top:20px; max-width:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:820px){
  .inv{grid-template-columns:minmax(0,1fr); gap:56px; padding-top:56px}
  .inv-form{grid-template-columns:minmax(0,1fr)}
  .inv-lead{font-size:17px}
}
/* a warm glow over a band image, above the title (the same light as the About band) */
.band-glow{position:absolute; inset:0; z-index:-1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(ellipse 34% 58% at 16% 48%, rgba(122,90,42,.55) 0%, transparent 70%),
             radial-gradient(ellipse 22% 34% at 30% 20%, rgba(122,90,42,.28) 0%, transparent 70%)}
@media (max-width:820px){ .band-glow{background:radial-gradient(ellipse 80% 45% at 25% 50%, rgba(122,90,42,.5) 0%, transparent 70%)} }
/* Ventures image: navy ground, shapes upper right, open space lower left for the title (default cover).
   Its glows take the picture's own colours — lavender and coral — the way each Insights image carries its own. */
.band-ven .band-glow{background:radial-gradient(ellipse 32% 55% at 16% 62%, rgba(122,110,170,.42) 0%, transparent 70%),
                                radial-gradient(ellipse 22% 38% at 8% 14%, rgba(122,110,170,.28) 0%, transparent 70%),
                                radial-gradient(ellipse 26% 40% at 50% 92%, rgba(205,112,78,.22) 0%, transparent 70%)}
@media (max-width:820px){
  .band-ven .band-glow{background:radial-gradient(ellipse 80% 40% at 25% 62%, rgba(122,110,170,.4) 0%, transparent 70%)}
}

/* About image: deep teal ground, cream and sage ribbons to the right, open space lower left for the title (default cover).
   Glows in the picture's own colours: sage around the title, a touch of its ochre near the lines. */
.band-ab .band-glow{background:radial-gradient(ellipse 32% 55% at 15% 64%, rgba(120,165,150,.35) 0%, transparent 70%),
                               radial-gradient(ellipse 22% 38% at 30% 14%, rgba(200,140,60,.22) 0%, transparent 70%)}
@media (max-width:820px){
  .band-ab .band-glow{background:radial-gradient(ellipse 80% 40% at 25% 64%, rgba(120,165,150,.33) 0%, transparent 70%)}
}

/* About → careers: a white box right under "Find us", on the same three columns (text in the first two, the address
   under the other addresses); the box reaches out by its own padding so its text lines up with the rows above */
.ab-join{background:var(--white); padding:26px 32px; margin-inline:-32px}
.ab-join-text{grid-column:span 2}
@media (max-width:820px){ .ab-join{padding:22px 16px; margin-inline:-16px} .ab-join-text{grid-column:auto} }