@font-face{
  font-family:"JetBrains Mono";
  src:url("jetbrains-mono-latin-var.woff2") format("woff2");
  font-weight:100 800;
  font-display:swap;
}

:root{
  --black:#0A0A0A;
  --white:#FFFFFF;
  --coral:#DF6C4F;
  --sand:#F4D9C6;
  --line:#2B2B2B;
  --ink:#0A0A0A;            /* text colour on the hero (set by main.js for the dark palette) */
  --pad:clamp(16px,4vw,48px);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.pal-dark{--ink:#FFFFFF}

*{box-sizing:border-box}
html{background:var(--black);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:var(--mono);font-weight:400;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--coral);outline-offset:4px}

.skip{position:absolute;left:-9999px;top:8px;background:var(--coral);color:var(--black);padding:8px 12px;font-weight:600;z-index:20}
.skip:focus{left:8px}

/* ================= HERO ================= */
.hero{
  position:relative;
  margin:10px;
  height:calc(100vh - 20px);
  height:calc(100svh - 20px);
  min-height:520px;
  border-radius:16px;
  overflow:hidden;
  color:var(--ink);
  background:#F4D9C6;                         /* fallback if WebGL is unavailable */
  isolation:isolate;
}
.hero :focus-visible{outline-color:var(--ink)}
#bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.nogl{background:linear-gradient(115deg,#E8654A,#F5A25D 30%,#F4D9C6 50%,#9EDDB8 72%,#86C9F2)}

/* ticker */
.ticker{position:absolute;left:0;right:0;top:0;height:44px;overflow:hidden;display:flex;align-items:center}
.ticker-track{display:flex;white-space:nowrap;font-size:.8125rem;font-weight:500;letter-spacing:.01em;animation:tick 60s linear infinite}
.ticker-track span{flex:none}
@keyframes tick{to{transform:translateX(-25%)}}

/* plus grid */
.plus{position:absolute;top:68px;right:clamp(20px,5vw,72px);display:flex;flex-direction:column;gap:2px;font-size:1.125rem;font-weight:500;line-height:1.2;letter-spacing:.35em;white-space:pre}

/* title: the logo, set in the same mono as everything else */
.title{margin:0;font-weight:500;font-size:clamp(2.25rem,7.4vw,6.75rem);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.title .w{position:absolute;display:block;white-space:nowrap;will-change:transform}
#w1{left:clamp(20px,5.5vw,80px);top:calc(14% + 22px)}
#w2{right:clamp(20px,6vw,90px);top:calc(14% + 22px + 1.15em);text-align:right}

/* ventures: vertical rules with staggered labels */
.cols{position:absolute;inset:0;pointer-events:none;will-change:transform}
.col{
  position:absolute;top:var(--y);bottom:0;left:var(--x);
  min-width:36px;padding:0 0 0 10px;
  pointer-events:auto;
  color:var(--ink);text-decoration:none;
  font-size:.8125rem;font-weight:500;line-height:1.2;letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent;
}
.rule{position:absolute;left:0;top:0;bottom:0;width:1px;background:currentColor;transition:width .2s ease}
.col:hover .rule,.col:focus-visible .rule{width:3px}
.col .name{display:inline-block;padding-top:1px;text-underline-offset:4px;text-decoration-thickness:1px}
.col:hover .name,.col:focus-visible .name{text-decoration-line:underline}
.col.off{cursor:default;opacity:.62}
.col.off .rule{background:repeating-linear-gradient(to bottom,currentColor 0 5px,transparent 5px 10px)}
.col.off:hover .name,.col.off:focus-visible .name{text-decoration-line:none}
.col.flick .name{animation:flick .5s steps(1,end)}
@keyframes flick{0%{opacity:1}12%{opacity:0}25%{opacity:1}40%{opacity:0}55%{opacity:1}70%{opacity:.2}100%{opacity:1}}

/* arrow */
.arrow{position:absolute;right:clamp(20px,8vw,130px);top:57%;width:clamp(36px,5vw,64px);color:var(--ink);transition:transform .25s ease}
.arrow svg{display:block;width:100%;height:auto}
.arrow:hover,.arrow:focus-visible{transform:translate(4px,-4px)}

/* ================= ABOUT ================= */
.about{padding:clamp(48px,8vw,112px) var(--pad) clamp(32px,5vw,64px);max-width:1100px;margin:0 auto}
.purpose{
  margin:0;max-width:34ch;
  font-size:clamp(1.25rem,2.4vw,1.875rem);line-height:1.35;font-weight:400;letter-spacing:-.01em;
  color:var(--white);
}
.list{list-style:none;margin:clamp(36px,5vw,72px) 0 0;padding:0;border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line)}
.list a,.list .off{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:clamp(14px,1.8vw,22px) 0;
  font-size:clamp(1rem,1.8vw,1.375rem);font-weight:400;
  text-decoration:none;color:var(--white);
}
.list .off{color:var(--sand);opacity:.6;cursor:default}
.list a::after{
  content:"";flex:none;width:.9em;height:.9em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9 9 1M3 1h6v6' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9 9 1M3 1h6v6' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.list a:hover{color:var(--coral)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:24px var(--pad) 40px;max-width:1100px;margin:0 auto;font-size:.8125rem;color:var(--sand)}
.foot a{color:var(--white);text-underline-offset:4px}
.foot a:hover{color:var(--coral)}

@media (max-width:600px){
  .hero{margin:8px;height:calc(100svh - 16px);border-radius:14px}
  .col{font-size:.6875rem}
  .plus{top:60px;font-size:1rem}
  .arrow{top:44%}
  #w1,#w2{font-size:clamp(2rem,11.5vw,3.25rem)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}