/* ==========================================================================
   kernel.css — shared design system for join-kernel.com
   Light risograph aesthetic: off-white paper, Generator slate-purple, grotesk.
   index.html keeps its page-specific CSS inline; this drives the other pages.
   ========================================================================== */
:root{
  --void:#f5f5f3; --bg:#efeef0; --text:#2d2b47; --muted:#62607a; --faint:#8c8a9e;
  --line:#e2e0db; --line2:#d6d4de; --amber:#4a4870; --green:#1faf63; --ink:#ffffff;
  --sans:'Space Grotesk',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace; --display:'Benne',Georgia,serif;
  --gut:clamp(22px,5vw,68px); --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--void);color:var(--muted);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(74,72,112,.16)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* NAV — transparent, no background */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;background:transparent}
.nav-in{max-width:var(--maxw);margin-inline:auto;padding:18px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px}
.wm{font-family:var(--mono);font-weight:700;font-size:.95rem;letter-spacing:.04em;line-height:1;color:var(--text);position:relative;padding-left:2.15em}
.wm::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1.8em;height:1.8em;background:url(favicon.svg) center/contain no-repeat}
.wm small{display:block;font-weight:400;font-size:.55rem;letter-spacing:.16em;color:var(--faint);margin-top:4px;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:28px;font-family:var(--mono);font-size:.73rem;letter-spacing:.04em}
.nav-links a{color:var(--amber);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links .apply{border:1px solid var(--amber);padding:.5em 1.05em;color:var(--amber);transition:background .25s,color .25s}
.nav-links .apply:hover{background:var(--amber);color:var(--void)}
@media(max-width:680px){.nav-links a:not(.apply){display:none}}

/* TYPE — grotesque */
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.8rem,7.4vw,5.8rem);line-height:1.04;letter-spacing:-.008em;color:var(--text)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,4.8vw,3.5rem);line-height:1.08;letter-spacing:-.01em;color:var(--text)}
.lead{font-size:clamp(1.1rem,1.55vw,1.36rem);color:var(--muted);max-width:44ch;line-height:1.55}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:.9em;margin-bottom:26px}
.eyebrow::before{content:"";width:11px;height:11px;background:var(--amber);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);flex:none}

/* BUTTONS / LINKS */
.btn{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--amber);color:var(--amber);background:transparent;font-weight:500;font-size:.96rem;letter-spacing:.02em;padding:.85rem 1.7rem;transition:background .25s,color .25s}
.btn:hover{background:var(--amber);color:var(--void)}
.ghost{font-family:var(--mono);font-size:.82rem;letter-spacing:.03em;color:var(--muted);display:inline-flex;gap:.5em;transition:color .2s,gap .2s}
.ghost:hover{color:var(--text);gap:.75em}
.link{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:.86rem;letter-spacing:.03em;color:var(--amber);margin-top:32px;border-bottom:1px solid rgba(74,72,112,.34);padding-bottom:4px;transition:gap .2s,border-color .2s}
.link:hover{gap:.9em;border-color:var(--amber)}

/* PAGE HERO + BEATS */
.phero{padding:clamp(150px,24vh,250px) 0 clamp(64px,9vh,110px)}
.phero h1{max-width:none}
.phero .lead{margin-top:clamp(24px,3vw,34px);max-width:62ch}
.beat{border-top:1px solid var(--line);padding-block:clamp(86px,13vh,168px)}
.beat h2{max-width:none}
.beat .lead{margin-top:22px}

/* CTA + FOOTER */
.cta{border-top:1px solid var(--line);padding-block:clamp(96px,16vh,200px);text-align:center}
.cta h2{margin-inline:auto;max-width:18ch}
.cta .btn{margin-top:clamp(34px,5vw,48px)}
footer{border-top:1px solid var(--line);padding-block:42px;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--faint)}
.foot-in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
.foot-in a{color:var(--muted)}.foot-in a:hover{color:var(--text)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}

/* REVEAL */
.rise{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rise{opacity:1;transform:none}}