/* 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(20px,5vw,48px);
  --hdr:84px;                           /* header height */
  --band:clamp(460px,68vh,680px);       /* opening image on Insights, Ventures and About — one height for all three */
  --max:1280px;
  --radius:8px;                         /* buttons and the Subscribe pop-up: Substack's own corner (its --border-radius-sm), so a button and the sign-up box it opens match (2026-10-26) */
  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}
html{-webkit-tap-highlight-color:transparent}   /* no grey box over a tapped link on phones (it flashed in the menu) */
: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; border-radius:var(--radius); 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, transform .35s ease}
.hdr.hide{transform:translateY(-100%)}   /* articles: away while reading down, back on the way up (jfs.js) */
.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(--panel); transition:opacity .3s ease}   /* paper-toned until the strip loads: a dark one flashed as a black box */
.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; border-bottom:1px solid var(--rule)}   /* the line between the carousel and the Insights list (2026-10-26) */
.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:start;   /* from the top, as on a16z: every slide starts at the same height and the space below is left to < 01/04 > */
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s .25s}
.fx-text.is-on{opacity:1; visibility:visible; transition:opacity .45s ease .25s}   /* the old text is gone before the new one starts: they overlapped for .3s (Jimmy 2026-10-26) */
.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}
.btn[data-subscribe]:hover{background:var(--yellow); border-color:var(--yellow); color:var(--ink)}   /* Subscribe turns yellow wherever it is, as on the article page (was black on the Insights list) */

/* ── 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); border-radius:var(--radius)}  /* 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; text-wrap:pretty}   /* fill the line, as body text does; balance left list titles half-width on phones */
.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)}

/* ── TOPIC + AUTHOR pages (parts/listing.php; a16z: one template, the band laid out per kind) ──
   a dark band carrying on from the header, then the list with a sidebar (Subscribe, topics) */
.lband{background:var(--dark); color:var(--on-dark); border-top:1px solid var(--on-dark-rule)}
.lband-in{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center; padding-block:64px 60px}
.lband.is-author .lband-in{grid-template-columns:176px minmax(0,1fr)}
.lband-pic{width:176px; height:176px; border-radius:50%; object-fit:cover; background:var(--panel)}
.lband-pic.is-mono{display:grid; place-items:center; background:var(--yellow); font-family:var(--sans); font-size:46px; font-weight:500; letter-spacing:.04em; color:var(--ink)}
.lband-text{display:grid; gap:14px; justify-items:start}
.lband-k{font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-2)}
.lband-k:hover{color:var(--on-dark)}
.lband h1{font-size:clamp(40px,5vw,64px); line-height:1.04; letter-spacing:-.01em; font-weight:300}
.lband-lede{font-size:clamp(17px,1.5vw,20px); line-height:1.45; color:var(--on-dark-2); max-width:52ch}
.lband-social{display:grid; place-items:center; width:40px; height:40px; margin-top:6px; border:1px solid var(--on-dark-rule); border-radius:50%; transition:background .2s, color .2s, border-color .2s}
.lband-social:hover{background:var(--yellow); border-color:var(--yellow); color:var(--ink)}
.lband-social svg{width:16px; height:16px; fill:currentColor}
.lbody{display:grid; grid-template-columns:minmax(0,1fr) clamp(200px,20vw,264px); gap:clamp(40px,6vw,96px); padding-block:56px 96px}
.lmain{display:grid; gap:48px; align-content:start; min-width:0}
.lhead{display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-bottom:1px solid var(--ink); padding-bottom:14px}
.lhead + .list{margin-top:-48px}
.lhead + .list .item:first-child{border-top:0}
.lhead-k{font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase}
.lhead-n{font-family:var(--sans); font-size:13px; color:var(--ink-2)}
.labout{display:grid; gap:16px}
.labout .lhead-k{border-bottom:1px solid var(--ink); padding-bottom:14px}
.labout-text{display:grid; gap:1em; font-size:18px; line-height:1.6}   /* fills the column, as on a16z (Jimmy 2026-10-26: 62ch left a blank band on the right) */
.lmain .pager{padding-top:0}
.lside-in{position:sticky; top:calc(var(--hdr) + 28px); display:grid; gap:36px}
.ltopics{display:grid; border-top:1px solid var(--rule); padding-top:16px}
.ltopics .rec-h{margin-bottom:10px}
.ltopics a{padding:7px 0 7px 16px; border-left:1px solid var(--rule); font-family:var(--sans); font-size:13px; color:var(--ink-2); transition:color .2s}
.ltopics a:hover{color:var(--ink)}
.ltopics a.on{color:var(--ink); font-weight:500; border-left-color:var(--yellow); box-shadow:inset 3px 0 0 var(--yellow)}   /* as the article's section nav */
@media (max-width:820px){
  .lband-in{padding-block:40px 36px; gap:20px}
  .lband.is-author .lband-in{grid-template-columns:minmax(0,1fr)}
  .lband-pic{width:104px; height:104px}
  .lband-pic.is-mono{font-size:30px}
  .lbody{grid-template-columns:minmax(0,1fr); padding-block:36px 64px; gap:48px}
  .lside-in{position:static}
}

/* ── ARTICLE (a16z layout, Jimmy 2026-10-26) ───────────
   head band · left rail (title, section nav, Share) · text · right rail (Subscribe follows, Recommended held at the
   bottom of the screen) · author and recommendations at the end. Text set after a16z: one blank line between
   paragraphs, headings close to the text they open, bold that reads as bold, big italic quotes. */
.ahead{background:var(--white); border-bottom:1px solid var(--rule)}
.ahead.has-pic{border-bottom:0}   /* the picture ends the head band */
.ahero-img{display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; background:var(--panel)}   /* the featured image, whole and sharp (Jimmy 2026-10-26) */
.ahead-in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:end; padding-block:56px 32px}
.ahead-in > div:first-child{display:grid; gap:12px}
.ahead h1{font-size:clamp(34px,4.4vw,56px); line-height:1.06; letter-spacing:-.01em; max-width:20ch}
.ahead-share{display:none}
.ahead .dek{font-size:clamp(18px,1.7vw,22px); line-height:1.4; color:var(--ink-2); max-width:44ch; margin-top:-2px}
.byline-a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule); text-decoration-thickness:1px; text-underline-offset:3px}
.byline-a:hover{text-decoration-color:var(--ink)}
.sub-btn{display:block; min-width:150px; padding:14px 22px; border:1px solid var(--ink); border-radius:var(--radius); text-align:center; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; transition:background .2s, border-color .2s}
.sub-btn:hover{background:var(--yellow); border-color:var(--yellow)}   /* brand colour on hover, as a16z does with its green */
.ahead .sub-btn{width:clamp(180px,17vw,232px)}   /* as wide as the right rail, so the one that follows in the rail is the same button, right under it (Jimmy 2026-10-26) */
.abody-bg{background:var(--white)}
/* rails sized after a16z's (Jimmy 2026-10-26: the text column looked narrow): at 1440 the text is 636px, about 75 characters */
.abody{display:grid; grid-template-columns:clamp(180px,16vw,220px) minmax(0,1fr) clamp(180px,17vw,232px); gap:48px; padding-block:56px 48px}

/* left rail: everything in it travels with the reader */
.arail-l-in{position:sticky; top:calc(var(--hdr) + 28px); max-height:calc(100vh - var(--hdr) - 56px); overflow-y:auto; scrollbar-width:none; display:grid; gap:28px; align-content:start; transition:top .35s ease}
.arail-title{font-size:16px; line-height:1.3; font-weight:400; opacity:0; transition:opacity .3s}
.post.past-head .arail-title{opacity:1}
.toc ol{list-style:none; margin:0; padding:0; display:grid}
.toc a{display:block; padding:7px 0 7px 16px; border-left:1px solid var(--rule); font-family:var(--sans); font-size:12px; line-height:1.4; color:var(--ink-2); transition:color .2s, border-color .2s, box-shadow .2s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink); font-weight:500; border-left-color:var(--yellow); box-shadow:inset 3px 0 0 var(--yellow)}   /* the section being read, in JFS yellow (a bar, never yellow text) */
.share{position:relative; font-family:var(--sans); font-size:13px; color:var(--ink-2)}
.share-btn:hover,.share-menu > *:hover{color:var(--ink)}
.share-menu{display:grid; justify-items:start; gap:8px; margin-top:12px; padding-left:16px; border-left:1px solid var(--rule)}
.share-menu[hidden]{display:none}

/* right rail: Subscribe follows once the one in the head has gone; Recommended sits at the bottom of the screen
   and steps aside when the full list at the end comes into view */
.arail-r{display:flex; flex-direction:column; gap:32px}
.sub-follow{position:sticky; top:calc(var(--hdr) + 28px); opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s, top .35s ease}
.post.past-head .sub-follow{opacity:1; visibility:visible; transition:opacity .3s, top .35s ease}
.rec-mini{margin-top:auto; position:sticky; bottom:28px; display:grid; gap:18px; padding-top:16px; border-top:1px solid var(--rule); transition:opacity .3s}
.post.at-end .rec-mini{opacity:0; pointer-events:none}
.rec-h{font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase}
.rec-item{display:grid; gap:4px}
.rec-topic,.rec-by{font-family:var(--sans); font-size:11px; color:var(--ink-3); letter-spacing:.02em}
.rec-title{font-size:16px; line-height:1.3; font-weight:400}
.rec-item:hover .rec-title{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
body.hdr-hidden .arail-l-in, body.hdr-hidden .sub-follow{top:28px}

/* the end: author, then the recommendations at full width */
.aend{background:var(--white)}
.aend-in{display:grid; grid-template-columns:clamp(180px,16vw,220px) minmax(0,1fr) clamp(180px,17vw,232px); gap:48px; padding-block:0 96px}
/* About the author, after a16z (Jimmy 2026-10-26): a black rule across the text column, then one row per author — a 120px
   picture and beside it, about as tall, the name (Newsreader light), one line and "Read more from …" over a fine rule;
   LinkedIn at the far right once filled in */
.aby{grid-column:2; display:grid; gap:32px; border-top:1px solid var(--ink); padding-top:22px}
.aby-k{font-family:var(--sans); font-size:15px}
.aby-row{display:grid; grid-template-columns:120px minmax(0,1fr); column-gap:28px; align-items:center}
.aby-row.has-in{grid-template-columns:120px minmax(0,1fr) auto}
.aby-pic{width:120px; height:120px; border-radius:50%; object-fit:cover; background:var(--panel)}
.aby-pic.is-mono{display:grid; place-items:center; background:var(--yellow); font-family:var(--sans); font-size:32px; font-weight:500; letter-spacing:.04em; color:var(--ink)}
.aby-info{display:grid; gap:8px; min-width:0}
.aby-name{font-size:28px; font-weight:300; line-height:1.15}
.aby-name a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.aby-line{font-family:var(--sans); font-size:15px; line-height:1.5; max-width:46ch}
.aby-more{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:14px; padding-bottom:12px; border-bottom:1px solid var(--rule); font-family:var(--sans); font-size:15px}
.aby-more span:last-child{font-size:18px; line-height:1}
.aby-more:hover span:first-child{text-decoration:underline; text-underline-offset:3px}
.aby-social{align-self:end; display:grid; place-items:center; width:40px; height:40px; margin-bottom:2px; border-radius:50%; background:var(--panel); transition:background .2s}
.aby-social:hover{background:var(--yellow)}
.aby-social svg{width:16px; height:16px; fill:currentColor}
/* Subscribe once more after the author (Jimmy 2026-10-26, as a16z): on phones and tablets the only one after the text */
.sub-end{grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px 48px; padding:40px clamp(24px,4vw,56px); background:var(--panel)}
.sub-end > div{display:grid; gap:10px}
.sub-end-k{font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase}
.sub-end-t{font-size:clamp(22px,2.2vw,30px); line-height:1.25; font-weight:300; max-width:30ch; text-wrap:pretty}
.rec-full{grid-column:1/-1; display:grid; gap:28px; border-top:1px solid var(--rule); padding-top:40px}
.sub-end + .rec-full{border-top:0; padding-top:0}   /* the band already closes the part above */
.rec-full h2{font-size:clamp(26px,2.6vw,34px); line-height:1.15}
.rec-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px}
.rec-grid .rec-item{gap:8px; align-content:start}
.rec-grid .rec-img{width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; margin-bottom:8px}
.rec-grid .rec-title{font-size:22px; line-height:1.25}

/* phones: the current section in a bar at the top (tap for the list) — built by jfs.js */
.toc-bar{display:none}

/* the text */
.prose{display:grid; gap:28px; font-size:18px; line-height:1.72; font-weight:400}
.prose > *{margin:0; min-width:0}
.prose strong,.prose b{font-weight:600}
.prose figure{margin:8px 0}
.prose figcaption{font-size:13px; color:var(--ink-2); margin-top:8px}
/* two levels that can't be confused (Jimmy 2026-10-26: the five drives read like sections): sections large and light with room
   above, subheads smaller and semibold, both in the text's serif (a sans subhead looked out of place to him) */
.prose h2{font-size:32px; font-weight:400; line-height:1.15; letter-spacing:-.005em; margin-top:48px; scroll-margin-top:calc(var(--hdr) + 28px)}
.prose h3{font-size:21px; font-weight:600; line-height:1.3; margin-top:6px; scroll-margin-top:calc(var(--hdr) + 28px)}
.prose h2 + *{margin-top:-10px}   /* a heading sits close to the text it opens */
.prose h3 + *{margin-top:-16px}
.prose a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.prose ol{padding-left:1.4em; display:grid; gap:12px}
.prose ol:has(> li:nth-child(10)){padding-left:1.9em}   /* room for two-digit numbers inside the margin */
.prose ul{list-style:none; padding:0; display:grid; gap:12px}
.prose ul > li{position:relative; padding-left:26px}
.prose ul > li::before{content:''; position:absolute; left:9px; top:.78em; width:5px; height:5px; border-radius:50%; background:var(--ink)}
/* quotes: a16z's format (big italic, set in from the text) with a short yellow bar where their quote mark sits */
.prose blockquote{position:relative; padding:6px 0 6px 32px; font-size:24px; line-height:1.45; font-style:italic}
.prose blockquote::before{content:''; position:absolute; left:0; top:15px; width:4px; height:24px; background:var(--yellow)}
.prose blockquote p{margin:0}
.prose blockquote p + p{margin-top:16px}
.prose blockquote cite{display:block; margin-top:14px; font-family:var(--sans); font-size:13px; font-style:normal; letter-spacing:.02em; color:var(--ink-2)}
.prose blockquote cite::before{content:'— '}
.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}
/* tables in insights (2026-10-25): sans, brand-yellow header row (Jimmy); wide tables scroll sideways with the first column held */
.prose .wp-block-table{margin:4px 0 8px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.prose .wp-block-table table{width:100%; border-collapse:collapse; font-family:var(--sans); font-size:14px; line-height:1.45; font-weight:400}
.prose .wp-block-table th,.prose .wp-block-table td{border:0}
.prose .wp-block-table thead{border-bottom:0}
.prose .wp-block-table th{background:var(--yellow); text-align:left; vertical-align:bottom; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); padding:11px 12px}
.prose .wp-block-table td{vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--rule)}
.prose .wp-block-table tbody tr td:first-child{font-weight:500}
.prose .wp-block-table.is-wide table{min-width:760px}
.prose .wp-block-table.is-wide th:first-child,.prose .wp-block-table.is-wide td:first-child{position:sticky; left:0; background:var(--white); min-width:150px; box-shadow:1px 0 0 var(--rule)}
.prose .wp-block-table.is-wide th:first-child{background:var(--yellow)}
.prose .wp-block-table.is-xwide table{min-width:0; width:max-content; table-layout:fixed}
.prose .wp-block-table.is-xwide th,.prose .wp-block-table.is-xwide td{width:150px}
.prose .wp-block-table.is-xwide th:first-child,.prose .wp-block-table.is-xwide td:first-child{width:118px; min-width:118px}
.prose .wp-block-table figcaption{font-family:var(--sans); font-size:13px; color:var(--ink-2); margin-top:8px}
/* a table labelled "… {dots}" drawn as a dot matrix by jfs.js (Anatomy's Figure 1, Jimmy 2026-10-26): rows × columns of dots,
   column labels slanted; a dot, a row or a column shows its examples underneath. The table stays for feeds and email. */
.prose .wp-block-table.has-dots{display:none}
.dots{--dc:64px; font-family:var(--sans)}
.dots-grid{display:grid; grid-template-columns:minmax(0,1fr) repeat(var(--n),var(--dc)); padding-right:36px}   /* room for the last slanted label */
.dots-corner,.dots-col{height:96px; border-bottom:1px solid var(--ink)}
.dots-col{position:relative}
.dots-corner{display:flex; align-items:flex-end; padding-bottom:12px}
.prose .dots-logo{height:32px; width:auto}   /* the JFS mark in the figure's empty corner, as a16z marks its charts */
.dots-col span{position:absolute; left:50%; bottom:10px; transform-origin:0 100%; transform:rotate(-45deg); white-space:nowrap; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}   /* as the tables' header row */
.dots-row{display:flex; align-items:center; min-height:40px; padding:7px 12px 7px 0; border-bottom:1px solid var(--rule); text-align:left; font-size:14px; font-weight:500; line-height:1.35; cursor:pointer}   /* as a table's first column */
.dots-row em{font-style:italic; color:var(--ink-2)}
.dots-cell{display:flex; align-items:center; justify-content:center; min-height:40px; border-bottom:1px solid var(--rule)}
.dots-cell:not(.is-empty){cursor:pointer}
.dots-cell i{display:block; width:12px; height:12px; border-radius:50%; background:var(--ink); transition:transform .15s, opacity .2s, box-shadow .2s}
.dots-cell.is-empty i{width:5px; height:5px; background:var(--rule)}
.dots-cell:not(.is-empty):hover i{transform:scale(1.3)}
.dots-row:hover,.dots-row.on{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.dots-row.on{font-weight:600}
.dots.focus .dots-cell:not(.is-empty) i{opacity:.18}
.dots.focus .dots-cell.on:not(.is-empty) i{opacity:1; box-shadow:0 0 0 4px var(--yellow)}
.dots-hint{font-size:12px; color:var(--ink-2)}
.dots-out{grid-column:1/-1; padding:14px 0 18px; border-bottom:1px solid var(--rule); background:linear-gradient(to right, var(--yellow) 0 3px, transparent 3px)}   /* the examples, opened under their row */
.prose .dots-list{margin:0; padding-left:20px; gap:8px; font-family:var(--serif); font-size:16px; line-height:1.4}
.prose .dots-list > li{display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; align-items:baseline; padding-left:0}
.prose .dots-list > li::before{display:none}
.dots-list span{font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
/* cards and scales drawn by jfs.js from tables labelled "{cards}" / "{scale: …}" (essay 2, Jimmy 2026-10-26): yellow tags as on
   the tables' header row, serif lines, sans lists; stacked when the column is under 560px (.is-narrow). The tables stay for feeds. */
.prose .wp-block-table.has-fig{display:none}
.jtag{justify-self:start; align-self:start; display:inline-block; background:var(--yellow); font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.08em; line-height:1.3; text-transform:uppercase; color:var(--ink); padding:3px 7px}
.jcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; font-family:var(--sans)}
.jcard{display:grid; align-content:start; gap:10px; border-top:1px solid var(--ink); padding-top:12px}
.prose .jcard-q{margin:0; font-family:var(--serif); font-size:18px; line-height:1.4}
.prose .jcard-list,.prose .jzone ul{margin:0; padding:0; list-style:none; display:grid; gap:4px; font-size:14px; line-height:1.45; color:var(--ink-2)}
.prose .jcard-list > li{position:relative; padding-left:12px}
.prose .jcard-list > li::before{content:''; position:absolute; left:0; top:.62em; width:4px; height:4px; border-radius:50%; background:var(--ink-3)}
.jcards.is-narrow{grid-template-columns:minmax(0,1fr); gap:0}
.jcards.is-narrow .jcard{padding:14px 0 18px; border-top-color:var(--rule)}
.jcards.is-narrow .jcard:first-child{border-top-color:var(--ink)}
.jscale{display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); font-family:var(--sans); color:var(--ink)}
.jscale-ax{grid-column:1/-1; position:relative; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding-bottom:8px; border-bottom:1px solid var(--ink); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.jscale-ax::after{content:''; position:absolute; right:0; bottom:-4px; border-style:solid; border-width:4px 0 4px 7px; border-color:transparent transparent transparent var(--ink)}
.jzone{display:grid; align-content:start; gap:10px; padding:14px 14px 16px; border-right:1px solid var(--rule)}
.jscale > .jzone:nth-child(2){padding-left:0}
.jscale > .jzone.is-last{border-right:0}   /* the bars after it are divs too, so :last-of-type missed it */
/* wide: each column's tag, pictogram, reach line, problem and examples sit on shared rows (subgrid), so "Millions", "The size of
   the room" and "One owner" line up however long the text above them (Jimmy 2026-10-26) */
.jscale-ax{grid-row:1}
.prose .jscale-logo{flex:none; height:28px; width:auto; margin-bottom:2px}
.prose > .jscale{margin-bottom:8px}
.jscale:not(.is-narrow) > .jzone{grid-row:2 / span 5; grid-template-rows:subgrid; row-gap:10px}
.jpict{display:block; height:40px; width:auto; max-width:100%; margin:6px 0 2px; color:var(--ink)}
.prose .jzone-reach{margin:0; font-family:var(--serif); font-size:20px; line-height:1.3}
.prose .jzone-p{margin:0; font-size:14px; line-height:1.45}
.prose .jzone-e{margin:0; font-size:13px; line-height:1.45; color:var(--ink-2)}
.jscale-lbl{grid-column:1/-1; margin-top:2px; padding-top:12px; border-top:1px solid var(--rule); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.jbar{grid-column:var(--a)/var(--b); margin-top:8px; display:flex; align-items:center; min-height:28px; padding:0 10px; background:var(--panel); border-left:3px solid var(--ink); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.jbar b{font-weight:500}
.jbar span{overflow:hidden; text-overflow:ellipsis}
.jscale.is-narrow{grid-template-columns:minmax(0,1fr) repeat(var(--k,0),26px); column-gap:8px}
.jscale.is-narrow .jscale-ax{border-bottom:0}
.jscale.is-narrow .jscale-ax::after{display:none}
.jscale.is-narrow .jscale-ax > span::after{content:' ↓'}
.jscale.is-narrow .jzone{grid-column:1; grid-row:var(--r); padding:14px 0 16px; border-right:0; border-bottom:1px solid var(--rule)}
.jscale.is-narrow .jzone:nth-child(2){border-top:1px solid var(--ink)}
.jscale.is-narrow .jscale-lbl{display:none}
.jscale.is-narrow .jbar{grid-column:var(--c); grid-row:var(--ra)/var(--rb); margin-top:0; min-height:0; padding:12px 0; justify-content:flex-start; writing-mode:vertical-rl; border-left:0; border-top:3px solid var(--ink); font-size:12px}
.jscale.is-narrow .jbar span{display:none}
/* wide tables (the appendix): shown whole, scaled down to the column by jfs.js, and opened at full size in a viewer on a tap —
   a16z does this with its chart images (Jimmy 2026-10-26: better than scrolling sideways) */
.prose .wp-block-table.is-fit{overflow:visible; cursor:zoom-in}
.prose .wp-block-table.is-fit th:first-child,.prose .wp-block-table.is-fit td:first-child{position:static; box-shadow:none}
.tfoot{display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--sans)}
.prose > .tfoot{margin-top:-24px}   /* 12px under each table or figure */
.prose > .dots + .tfoot{margin-top:-16px}
.prose details > .tfoot{margin-top:12px}
.tfoot-open{font-size:12px; font-weight:500; letter-spacing:.02em}
.tfoot-open:hover{text-decoration:underline; text-underline-offset:3px}
.prose .tfoot img{height:24px; width:auto; margin-left:auto}
.prose > .tview{margin:auto; width:min(1120px,96vw); max-width:none; max-height:92vh; padding:0; border:0; background:var(--white); color:var(--ink); overflow:hidden}
.tview::backdrop{background:rgba(17,17,17,.62)}
.tview-head{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 12px 12px 20px; border-bottom:1px solid var(--rule); font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase}
.tview-close{font-size:26px; line-height:1; padding:2px 10px}
.tview-body{overflow:auto; max-height:calc(92vh - 52px); padding:16px 20px 24px}
.tview .wp-block-table{margin:0; overflow:visible; cursor:auto}
.tview .wp-block-table table{min-width:900px}

/* back matter (Appendix, Sources): folded under small labels between rules, and set smaller than the text once open
   (Jimmy 2026-10-26: they were as big as the headings) */
.prose details{border-top:1px solid var(--rule); min-width:0; font-size:16px; line-height:1.65; scroll-margin-top:calc(var(--hdr) + 28px)}   /* min-width:0 keeps a wide table inside from widening the text column */
.prose details + details{margin-top:-28px}   /* stacked: one rule between them, not the gap between paragraphs */
.prose details:last-child{border-bottom:1px solid var(--rule)}
.prose details[open]{padding-bottom:28px}
.prose summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.12em; line-height:1.4; text-transform:uppercase}
.prose summary:hover{color:var(--ink-2)}
.prose summary h2{font:inherit; letter-spacing:inherit; margin:0}   /* the folded section's title is an h2 for tools that read the page (functions.php), styled as the label it was */
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:''; flex:none; width:8px; height:8px; margin-right:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s}
.prose details[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.prose details > :not(summary){margin-top:20px}
.prose details > summary + *{margin-top:4px}
.prose details h3{font-size:18px; margin-top:32px}
.prose details h3 + *{margin-top:10px}
.prose details ol,.prose details ul{gap:8px}
.prose details ol{font-size:14.5px; line-height:1.55}
.prose p.tlabel{font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; margin-bottom:-16px}
.prose .fallback-note{font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--ink-2); border-left:3px solid var(--yellow); padding:2px 0 2px 14px}   /* an English-only insight on /zh/ (inc/fallback.php) */
.ftr--flush{margin-top:0}

/* tablets: no right rail (Subscribe stays in the head, recommendations at the end) */
@media (max-width:1100px){
  .abody,.aend-in{grid-template-columns:minmax(0,3fr) minmax(0,8fr); gap:48px}
  .arail-r{display:none}
  .ahead .sub-btn{width:auto}
  .rec-grid{gap:28px}
}
/* phones: one column, a16z's wider margins, Subscribe across the page, the section bar at the top */
@media (max-width:820px){
  .post .wrap{padding-inline:max(var(--pad),28px)}
  .ahead-in{grid-template-columns:1fr; gap:24px; padding-block:40px 28px}
  .ahead-share{display:block}
  .sub-btn,.ahead .sub-btn{width:100%}
  .abody,.aend-in{grid-template-columns:minmax(0,1fr); gap:0}
  .abody{padding-block:36px 40px}
  .arail-l{display:none}
  .aby{grid-column:auto}
  .post .ahero{padding-inline:0}   /* the picture runs edge to edge */
  .sub-end{grid-template-columns:minmax(0,1fr); margin-top:48px; padding:32px 24px}
  .rec-full{margin-top:48px}
  .rec-grid{grid-template-columns:minmax(0,1fr); gap:32px}
  /* phones (Jimmy 2026-10-26): the picture grows with the screen and stays about as tall as the text beside it, which shrinks a little */
  .aby-k{font-size:14px}
  .aby-row,.aby-row.has-in{grid-template-columns:clamp(86px,25vw,100px) minmax(0,1fr); column-gap:clamp(14px,4.5vw,20px); align-items:center}
  .aby-pic{grid-row:span 2; width:clamp(86px,25vw,100px); height:clamp(86px,25vw,100px)}
  .aby-pic.is-mono{font-size:clamp(22px,6.4vw,28px)}
  .aby-info{gap:4px}
  .aby-name{font-size:clamp(19px,5.6vw,23px)}
  .aby-line,.aby-more{font-size:clamp(12.5px,3.6vw,14px)}
  .aby-more{margin-top:10px; padding-bottom:8px; gap:8px}
  .aby-more span:first-child{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}   /* one line, or it outgrows the picture on small phones */
  .aby-more span:last-child{font-size:16px}
  .aby-social{grid-column:2; justify-self:start; align-self:start; width:32px; height:32px; margin:10px 0 0}
  .dots{--dc:40px}
  .prose .dots-list > li{grid-template-columns:minmax(0,1fr); gap:2px}
  .prose .dots-list{padding-left:16px}
  .prose .tfoot img{height:20px}
  .prose .dots-logo{height:22px}
  .prose .wp-block-table table{font-size:13px}   /* tables and the dot matrix share one size on phones */
  .prose > .tview{width:100vw; height:100dvh; max-height:none}
  .tview-body{max-height:calc(100dvh - 52px)}
  .dots-grid{padding-right:30px}
  .dots-row{font-size:13px}
  .prose{font-size:17px; line-height:1.7; gap:26px}
  .prose h2{font-size:27px; margin-top:36px}
  .prose h3{font-size:19px}
  .prose blockquote{font-size:21px; padding-left:24px}
  .prose blockquote::before{top:13px; height:21px}
  .prose h2,.prose h3,.prose details{scroll-margin-top:72px}
  .toc-bar{display:block; position:fixed; top:0; left:0; right:0; z-index:15; padding-top:env(safe-area-inset-top,0px); background:var(--white); border-bottom:1px solid var(--rule); font-family:var(--sans);
    transform:translateY(-100%); visibility:hidden; transition:transform .3s ease, visibility 0s .3s}
  .toc-bar.show{transform:none; visibility:visible; transition:transform .3s ease}
  .toc-cur{display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px; padding:15px max(var(--pad),28px); font-size:14px; line-height:1.35; text-align:left}
  .toc-cur span{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .toc-cur::after{content:''; flex:none; width:8px; height:8px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:translateY(-2px) rotate(45deg); transition:transform .2s}
  .toc-bar.open .toc-cur::after{transform:translateY(2px) rotate(-135deg)}
  .toc-bar ol{list-style:none; margin:0; padding:0 max(var(--pad),28px) 12px; max-height:60vh; overflow-y:auto; display:none}
  .toc-bar.open ol{display:block}
  .toc-bar ol a{display:block; padding:11px 0 11px 14px; border-left:1px solid var(--rule); font-size:14px; color:var(--ink-2)}
  .toc-bar ol a.on{color:var(--ink); font-weight:500; box-shadow:inset 3px 0 0 var(--yellow)}
}

/* ── 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; transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s}
  .nav.open{transform:none; visibility:visible; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  /* The dim behind the panel is a layer of its own that stays put and only fades (2026-10-26). It used to be the
     panel's box-shadow: on iPhones the shadow slid away with the panel and, while the next page loaded, stopped
     fading and stayed on the page as a dark block. */
  .hdr::after{content:""; position:fixed; inset:0; z-index:25; background:rgba(14,13,12,.35); pointer-events:none;
    opacity:0; visibility:hidden; transition:opacity .35s, visibility 0s .35s}
  .nav-open .hdr::after{opacity:1; visibility:visible; transition:opacity .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{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}
  /* phones, as on a16z: the image fills the band and the translucent panel sits on it, inset, at the bottom. The band is
     as tall as the opening image on Ventures and About (--band) and grows only for a long title; the Insights heading
     still shows on the first screen */
  .fx{height:auto}
  .fx-wrap{height:auto; min-height:var(--band); padding:calc(var(--hdr) + 40px) 24px 0}
  .fx-img img{object-position:72% 50%}   /* featured images keep their subject on the right half */
  .fx-panel{width:100%; height:auto}
  .fx-text{padding:28px 24px; gap:12px}   /* the same space under "Read" as above the topic */
  .fx-text p{-webkit-line-clamp:3}
  .fx-pager{padding:0 24px 18px}
  .ins-bar{padding-top:28px}
  .ins-tools{width:100%; gap:16px}   /* one row (Jimmy 2026-10-26): the topics fill the left, Subscribe sits at the right edge, in line with 中 / EN above */
  .ins-tools .select{flex:1; min-width:0}
  .ins-tools .btn{margin-left:0}
  .vgrid{grid-template-columns:1fr; gap:40px}
  .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} }
/* Moving between pages cross-fades where the browser can (Safari 18.2+, Chrome 126+) instead of cutting, which made
   leaving through the phone menu feel abrupt (2026-10-26); other browsers change pages as before */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
}

/* ── 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} }