/* ============================================================
   Banyan Ventures: shared design system (beige + pixel), 2026-10-03
   Used by every public page. The pixel art itself comes from js/pixel.js.
   The header geometry (68px, full-bleed, clamp(16px,4vw,40px) padding) is
   shared with the portal topbar in portal.html: change one, change both.
   ============================================================ */
:root{
  --beige:#ebe5d6; --paper:#f6f2e8; --ink:#1b1a17; --ink-2:#4a463f; --ink-3:#7a746a;
  --red:#ae1f19; --red-2:#d6342b; --green:#3f6f54; --green-d:#24432f; --gold:#c6a667;
  --line:#1b1a17; --px:4px;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --pixel:'Silkscreen',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--beige);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
canvas.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.pxl{font-family:var(--pixel);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(40px,5.6vw,70px);line-height:1.04}
h2{font-size:clamp(30px,4.2vw,52px);line-height:1.08}
h1 em,h2 em{font-style:italic;color:var(--green)}
p{margin:0}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--ink-2);max-width:56ch}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--red);font-family:var(--pixel);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--red);box-shadow:10px 0 0 var(--gold),20px 0 0 var(--green);margin-right:20px}

/* buttons: square, ink outline, hard offset shadow that presses in on hover */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  font-family:var(--pixel);font-size:13px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;box-shadow:var(--px) var(--px) 0 var(--ink);transition:transform .08s,box-shadow .08s;cursor:pointer}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn.primary{background:var(--red);color:#fff}
.btn.green{background:var(--green);color:#fff}
.btn.sm{padding:9px 14px;font-size:12px;box-shadow:3px 3px 0 var(--ink)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(235,229,214,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
/* Full-bleed header, same geometry as the portal topbar: 68px tall, logo and
   account controls pinned to the screen edges with the same side padding. */
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px;padding:0 clamp(16px,4vw,40px)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{height:34px;width:34px;object-fit:contain;flex:none}
.brand .nm{display:block;font-family:var(--serif);font-size:18px;line-height:1.1}
.brand .nm b{font-weight:600}
.brand .sub{display:block;font-family:var(--pixel);font-size:12px;line-height:1;letter-spacing:.1em;color:var(--ink-3);margin-top:7px}
.links{display:flex;gap:22px}
.links a{font-family:var(--pixel);font-size:12px;text-decoration:none;text-transform:uppercase;letter-spacing:.05em}
.links a:hover{color:var(--red)}
.nav-actions{display:flex;align-items:center;gap:12px;flex:none}
.nav-toggle{display:none;background:var(--paper);border:2px solid var(--ink);width:42px;height:42px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.mobile-menu{display:none}
@media (max-width:920px){
  .links,.nav-actions .btn{display:none}
  .nav-toggle{display:block}
  .mobile-menu.open{display:flex;flex-direction:column;gap:14px;position:fixed;inset:70px 0 auto 0;z-index:49;background:var(--paper);border-bottom:2px solid var(--ink);padding:22px 16px}
  .mobile-menu a{font-family:var(--pixel);font-size:14px;text-decoration:none;text-transform:uppercase}
  .mobile-menu .btn{align-self:flex-start}
}

/* hero */
.hero{padding:clamp(40px,7vw,90px) 0 clamp(36px,5vw,60px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--ink);background:var(--paper);padding:6px 12px;margin-bottom:26px}
.status i{width:10px;height:10px;background:var(--green);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{background:var(--gold)}}
.hero h1{margin-bottom:22px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.window{border:2px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}
.window .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:2px solid var(--ink);background:var(--green);color:#fff}
.window .bar .dots{display:flex;gap:6px}
.window .bar .dots i{width:10px;height:10px;border:2px solid var(--ink);background:var(--beige)}
.window .bar .dots i:first-child{background:var(--red)}
.window .bar .dots i:nth-child(2){background:var(--gold)}
.window .sky{background:linear-gradient(#e9e1cd,#f3ecdc 70%);}
.window canvas{width:100%;height:auto}
.window .foot{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-top:2px solid var(--ink);font-family:var(--pixel);font-size:12px;color:var(--ink-2)}
.stats{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border:2px solid var(--ink);background:var(--paper);width:max-content;max-width:100%}
.stats div{padding:12px 18px}
.stats div+div{border-left:2px solid var(--ink)}
.stats b{display:block;font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.1}
.stats span{font-family:var(--pixel);font-size:12px;color:var(--ink-3);text-transform:uppercase}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr} }

/* pixel soil divider */
.soil{height:24px;background-repeat:repeat-x;background-size:384px 24px;image-rendering:pixelated}

/* rolling startup strip between For startups and Insights */
.roll{padding-top:clamp(28px,4vw,48px)}
.roll canvas{width:100%;height:auto}
.roll-cap{display:flex;justify-content:space-between;gap:12px;margin-bottom:clamp(8px,1.5vw,16px)}
.roll-cap span{font-family:var(--pixel);font-size:12px;text-transform:uppercase;color:var(--ink-3);border:2px solid transparent;padding:5px 9px;transition:color .15s,background .15s,border-color .15s}
.roll-cap span.on{color:var(--ink);background:var(--paper);border-color:var(--ink)}
@media (max-width:700px){.roll-cap{flex-direction:column;align-items:flex-start;gap:6px}}

/* ticker */
.ticker{background:var(--ink);border-block:2px solid var(--ink)}
.ticker canvas{display:block;width:100%;height:44px}

section.pad{padding:clamp(64px,9vw,120px) 0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.head h2{margin-top:14px}
.head p{color:var(--ink-2)}
@media (max-width:820px){ .head{grid-template-columns:1fr} }

/* cards */
.card{border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:24px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar canvas{width:64px;height:64px;margin-bottom:18px}
.pillar .no{font-family:var(--pixel);font-size:12px;color:var(--ink-3)}
.pillar h3{font-size:24px;margin:4px 0 10px}
.pillar p{color:var(--ink-2);font-size:15px}
@media (max-width:820px){ .pillars{grid-template-columns:1fr} }

/* growth path */
.growth{background:var(--paper);border-block:2px solid var(--ink)}
.grow-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:start}
.grow-panel{position:sticky;top:96px}
.grow-panel .window canvas{width:100%}
.grow-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.grow-meta .lbl{font-family:var(--pixel);font-size:14px;color:var(--green-d)}
.gbar{display:flex;gap:4px}
.gbar i{width:22px;height:14px;border:2px solid var(--ink);background:var(--beige)}
.gbar i.on{background:var(--green)}
.gbar i.on:last-child{background:var(--red)}
.steps{display:flex;flex-direction:column;gap:22px}
.step{border:2px solid var(--ink);background:var(--beige);padding:22px 24px;transition:background .2s,box-shadow .2s,transform .2s;box-shadow:0 0 0 var(--ink)}
.step.on{background:#fff;box-shadow:6px 6px 0 var(--ink)}
.step .tag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
.step .tag .st{font-family:var(--pixel);font-size:12px;background:var(--ink);color:var(--beige);padding:3px 8px}
.step .tag .wk{font-family:var(--pixel);font-size:12px;color:var(--red)}
.step h3{font-size:25px;margin-bottom:12px}
.wk-list{display:grid;gap:12px;margin-top:6px}
.wk-item{display:grid;grid-template-columns:56px 1fr;gap:12px;padding-top:12px;border-top:2px dashed rgba(27,26,23,.25)}
.wk-item .n{font-family:var(--pixel);font-size:12px;color:var(--ink-3);padding-top:3px}
.wk-item b{display:block;font-weight:600}
.wk-item span{display:block;color:var(--ink-2);font-size:14.5px}
.wk-item .dl{font-family:var(--pixel);font-size:12px;color:var(--green-d);margin-top:4px}
/* Phones: the growing tree stays, as a compact sticky strip under the header,
   and the steps scroll underneath it. It grows exactly as on desktop. */
@media (max-width:880px){
  .grow-grid{grid-template-columns:1fr;gap:18px}
  .grow-panel{position:sticky;top:68px;z-index:5;background:var(--paper);padding:10px 0 12px;margin:0 -16px;padding-inline:16px;border-bottom:2px solid var(--ink)}
  .grow-panel .window{box-shadow:none}
  .grow-panel .window .bar{display:none}
  .grow-panel .window canvas{width:auto;height:min(30vh,210px);margin:0 auto}
  .grow-meta{margin-top:16px}
  .gbar i{width:16px;height:12px}
  .steps{gap:18px}
  .step.on{box-shadow:6px 6px 0 var(--ink)}
}

/* startups */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:880px){ .two{grid-template-columns:1fr} }
.photo{border:2px solid var(--ink);background:var(--paper);display:flex;flex-direction:column}
.photo picture{flex:1;min-height:0;display:block;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .cap{border-top:2px solid var(--ink);padding:8px 12px;font-family:var(--pixel);font-size:12px;text-transform:uppercase;background:var(--paper)}
.recv{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:4px}
.recv li{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;padding:12px 0;border-bottom:2px dashed rgba(27,26,23,.2)}
.recv li:last-child{border-bottom:0}
.recv canvas{width:40px;height:40px}
.recv b{display:block;font-weight:600}
.recv span{color:var(--ink-2);font-size:14.5px}

/* insights */
.ins{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ins a{text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:transform .08s,box-shadow .08s}
.ins a:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.ins .meta{display:flex;justify-content:space-between;gap:10px;font-family:var(--pixel);font-size:12px;text-transform:uppercase;color:var(--ink-3)}
.ins .meta .sec{color:var(--red)}
.ins h3{font-size:22px;line-height:1.2}
.ins p{color:var(--ink-2);font-size:14.5px;flex:1}
.ins .more{font-family:var(--pixel);font-size:12px;color:var(--green-d)}
@media (max-width:880px){ .ins{grid-template-columns:1fr} }

/* team */
.team-photos{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}
.team-photos .col{display:grid;gap:22px}
.team-photos .photo{aspect-ratio:4/3}
.team-photos .photo.big{aspect-ratio:auto;min-height:100%}
.members{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.member{text-decoration:none;padding:14px;display:flex;flex-direction:column;gap:6px;transition:transform .08s,box-shadow .08s}
.member:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.member .pic{aspect-ratio:1;border:2px solid var(--ink);overflow:hidden;margin-bottom:8px;background:var(--beige)}
.member .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.member b{font-family:var(--serif);font-weight:500;font-size:19px}
.member span{font-family:var(--pixel);font-size:12px;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:880px){ .team-photos{grid-template-columns:1fr} .members{grid-template-columns:repeat(2,1fr)} }

/* beliefs */
.beliefs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.belief{display:grid;grid-template-columns:56px 1fr;gap:16px}
.belief .num{font-family:var(--pixel);font-size:26px;color:var(--red);line-height:1}
.belief p{font-family:var(--serif);font-size:22px;line-height:1.25;margin-bottom:8px}
.belief span{color:var(--ink-2);font-size:14.5px}
@media (max-width:820px){ .beliefs{grid-template-columns:1fr} }

/* closing band with the grove */
.cta{background:var(--green-d);color:var(--beige);border-top:2px solid var(--ink);padding-top:clamp(56px,8vw,96px);text-align:center}
.cta .eyebrow{color:var(--gold)}
.cta .eyebrow::before{background:var(--gold);box-shadow:10px 0 0 var(--beige),20px 0 0 var(--red)}
.cta h2{margin:16px auto 20px;max-width:18ch}
.cta h2 em{color:var(--gold)}
.cta p{color:#cfd8cc;max-width:52ch;margin:0 auto}
.cta .ctas{justify-content:center}
.cta canvas{width:100%;margin-top:clamp(36px,5vw,60px)}
.cta .btn{box-shadow:var(--px) var(--px) 0 #0c1510}

/* footer */
.footer{background:var(--ink);color:#cfc8b8;padding:56px 0 28px;font-size:14px}
.ftop{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px}
.footer h5{font-family:var(--pixel);font-size:12px;font-weight:400;color:var(--gold);text-transform:uppercase;margin:0 0 12px;letter-spacing:.06em}
.footer a{display:block;text-decoration:none;color:#cfc8b8;margin-bottom:8px;overflow-wrap:anywhere}
.footer a:hover{color:#fff}
.footer .brand img{height:34px;filter:invert(1) hue-rotate(180deg) brightness(1.4)}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid #3a3731;margin-top:36px;padding-top:20px;font-size:12.5px;color:#958e80}
.fbot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px}
.fbot a{display:inline;color:#958e80}
@media (max-width:820px){ .ftop{grid-template-columns:1fr 1fr} .ftop>div:first-child{grid-column:1/-1} }

@media (prefers-reduced-motion:reduce){
  .status i{animation:none}
}

/* ============================================================
   Sub-pages: insights index, articles, submit-startup, 404, apply.
   Same class names the old dark stylesheet used, redrawn in beige.
   ============================================================ */
.page-hero{padding:clamp(48px,7vw,88px) 0 clamp(20px,3vw,32px)}
.page-hero h1,.h-xl{font-size:clamp(34px,4.6vw,56px);line-height:1.06;margin-top:16px}
.display{font-size:clamp(38px,5.4vw,64px);line-height:1.04}
.section-pad-s{padding:clamp(32px,5vw,64px) 0 clamp(64px,8vw,104px)}
.muted{color:var(--ink-3)}
.mt-s{margin-top:16px} .mt-m{margin-top:28px}
.maxw-60{max-width:60ch}
.link-underline{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.arw{display:inline-block}
.btn-primary{background:var(--red);color:#fff}
.btn-outline{background:var(--paper)}
.btn-lg{padding:15px 22px}

/* insights index */
.insights-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.insight{display:flex;flex-direction:column;gap:12px;text-decoration:none;border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:24px;transition:transform .08s,box-shadow .08s}
a.insight:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.insight .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--pixel);font-size:12px;text-transform:uppercase;color:var(--ink-3)}
.insight .meta .sector{color:var(--red)}
.insight h3{font-size:24px;line-height:1.2}
.insight p{color:var(--ink-2);font-size:15px;flex:1}
.insight .more{font-family:var(--pixel);font-size:12px;color:var(--green-d)}
.insight .more.muted{color:var(--ink-3)}
@media (max-width:760px){.insights-grid{grid-template-columns:1fr}}

/* articles */
.article-hero{padding:clamp(48px,7vw,88px) 0 8px}
.article-hero .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-family:var(--pixel);font-size:12px;text-transform:uppercase;color:var(--ink-3)}
.article-hero .meta a{color:var(--ink)!important;text-decoration:none;border:2px solid var(--ink);background:var(--paper);padding:4px 10px}
.article-hero .meta .sector{color:var(--red)}
.article-hero h1{margin:22px 0 0;max-width:22ch}
.standfirst{font-family:var(--serif);font-size:clamp(20px,2.2vw,25px);line-height:1.4;color:var(--ink-2);max-width:60ch;margin-top:22px}
.article-figure{margin:0 auto clamp(32px,5vw,56px);max-width:960px;border:2px solid var(--ink);background:var(--paper)}
.article-figure img{width:100%;max-height:520px;object-fit:cover}
.article-figure figcaption{border-top:2px solid var(--ink);padding:9px 14px;font-family:var(--pixel);font-size:12px;color:var(--ink-2)}
.article-body{max-width:700px;margin-inline:auto}
.article-body p{font-size:18px;line-height:1.75;color:var(--ink-2);margin-bottom:1.4em}
.article-body h2{font-size:clamp(26px,2.8vw,34px);margin:1.6em 0 .6em}
.article-body h3{font-size:22px;margin:1.4em 0 .5em}
.article-body ul,.article-body ol{margin:0 0 1.5em 1.2em;color:var(--ink-2)}
.article-body li{margin-bottom:.6em;line-height:1.7}
.article-body blockquote{margin:1.8em 0;padding:18px 22px;border:2px solid var(--ink);border-left:8px solid var(--red);background:var(--paper);font-family:var(--serif);font-size:23px;line-height:1.4;font-style:italic;color:var(--ink)}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}

/* submit-startup form */
.form-shell{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.form-aside{position:sticky;top:96px}
.aside-list{list-style:none;margin:24px 0 0;padding:0}
.aside-list li{display:flex;gap:14px;padding:13px 0;border-top:2px dashed rgba(27,26,23,.25);color:var(--ink-2);font-size:15px}
.aside-list .n{font-family:var(--pixel);font-size:12px;color:var(--red);padding-top:2px}
form.app{display:flex;flex-direction:column;gap:20px;border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:clamp(20px,3vw,32px)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--pixel);font-size:12px;text-transform:uppercase;color:var(--ink-2)}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{width:100%;border:2px solid var(--ink);background:#fff;color:var(--ink);padding:11px 12px;font:inherit;font-size:15.5px;border-radius:0}
.field textarea{min-height:120px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:3px 3px 0 var(--red)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h12v2H0zM2 2h8v2H2zM4 4h4v2H4z' fill='%231b1a17'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px}
.form-msg{font-family:var(--pixel);font-size:12px;min-height:1.2em}
.form-msg.ok{color:var(--green-d)} .form-msg.err{color:var(--red)}
@media (max-width:880px){.form-shell{grid-template-columns:1fr}.form-aside{position:static}}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}

/* small standalone pages (404, apply redirect): a pixel tree over a sentence */
.solo{min-height:calc(100svh - 70px);display:grid;place-items:center;padding:48px 0}
.solo-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,56px);align-items:center;max-width:980px}
.solo canvas{width:clamp(200px,28vw,320px);border:2px solid var(--ink);background:#f3ecdc}
.solo h1{font-size:clamp(34px,4.6vw,56px);margin:16px 0 20px}
@media (max-width:760px){.solo-in{grid-template-columns:1fr}}

/* compact footer for sub-pages */
.footer.slim{padding:32px 0 24px}
.footer.slim .fbot{margin-top:0;border-top:0;padding-top:0}