/* ===== Kala Academy — shared design system ===== */
:root{
  --bg:#0b0b0c; --bg2:#101012; --panel:#141416; --rule:#1e1e21; --rule2:#2b2b2f;
  --white:#f2f0ec; --soft:#a6a4a0; --muted:#6b6966; --coral:#ff5a36; --coral2:#ff7a52; --amber:#ffb35a;
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{background:var(--bg);color:var(--white);font-family:'Barlow',sans-serif;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;}
.mono{font-family:'Space Mono',monospace;}
.label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--coral);}
.label.dim{color:var(--muted);}
.o{color:var(--coral);}
.lead{max-width:680px;color:var(--soft);font-size:17px;}

/* nav */
.knav{position:sticky;top:0;z-index:1000;height:64px;display:flex;justify-content:space-between;align-items:center;
  padding:0 32px;background:rgba(11,11,12,.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--rule);font-family:'Space Mono',monospace;}
.knav-brand{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);display:flex;gap:6px;align-items:center;}
.knav-brand b{color:var(--white);font-weight:700;}.knav-brand em{color:var(--coral);font-style:normal;font-weight:700;}
.knav-links{display:flex;align-items:center;gap:2px;list-style:none;}
.knav-links>li{position:relative;}
.knav-links a,.knav-trigger{display:block;padding:13px 13px;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:#9b9893;font-weight:700;background:none;border:none;cursor:pointer;font-family:inherit;transition:color .15s;}
.knav-links a:hover,.knav-trigger:hover{color:var(--coral);}
.knav-links a.active{color:var(--coral);}
.knav-trigger::after{content:" ▾";font-size:.5rem;opacity:.6;}
.knav-drop{position:absolute;top:100%;left:0;min-width:240px;background:#111113;border:1px solid var(--rule2);padding:6px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.15s;list-style:none;}
.knav-links>li:hover .knav-drop{opacity:1;pointer-events:auto;transform:none;}
.knav-drop a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-left:2px solid transparent;}
.knav-drop a:hover{background:#181819;border-left-color:var(--coral);}
.knav-drop a strong{font-family:'Barlow Condensed',sans-serif;font-style:italic;text-transform:uppercase;font-size:.95rem;color:var(--white);letter-spacing:.02em;}
.knav-drop a span{font-size:.52rem;letter-spacing:.1em;color:#777;}
.knav-cta{font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:#0b0b0c!important;background:var(--coral);
  padding:10px 16px;border:1px solid var(--coral);border-radius:2px;transition:.15s;}
.knav-cta:hover{background:var(--coral2);}
.kburger{display:none;width:30px;height:30px;background:none;border:none;cursor:pointer;position:relative;}
.kburger span{position:absolute;left:4px;right:4px;height:1.5px;background:var(--coral);transition:.25s;}
.kburger span:nth-child(1){top:10px;}.kburger span:nth-child(2){top:15px;}.kburger span:nth-child(3){top:20px;}
.kburger.open span:nth-child(1){top:15px;transform:rotate(45deg);}.kburger.open span:nth-child(2){opacity:0;}.kburger.open span:nth-child(3){top:15px;transform:rotate(-45deg);}
@media(max-width:980px){.knav{padding:0 18px;}.kburger{display:block;}
  .knav-links{position:fixed;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--rule);padding:8px 18px 22px;transform:translateX(-100%);transition:.25s;max-height:calc(100vh - 64px);overflow:auto;}
  .knav-links.open{transform:translateX(0);}
  .knav-links a,.knav-trigger{padding:15px 6px;border-bottom:1px solid var(--rule);font-size:.65rem;width:100%;text-align:left;}
  .knav-drop{position:static;opacity:1;pointer-events:auto;transform:none;border:none;padding:0 0 0 14px;}
  .knav-cta{margin-top:12px;text-align:center;}}

/* page header */
.phead{padding:90px 0 46px;border-bottom:1px solid var(--rule);}
.phead .label{display:block;margin-bottom:14px;}
.phead h1{font-size:clamp(44px,8vw,96px);}
.phead p{max-width:600px;margin-top:18px;color:var(--soft);font-size:17px;}

/* buttons */
.btn{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:15px 24px;cursor:pointer;border:1px solid var(--coral);background:var(--coral);color:#0b0b0c;transition:all .15s;display:inline-flex;gap:10px;align-items:center;border-radius:2px;}
.btn:hover{background:var(--coral2);border-color:var(--coral2);transform:translateY(-2px);}
.btn.ghost{background:transparent;color:var(--white);border-color:var(--rule2);}
.btn.ghost:hover{border-color:var(--coral);color:var(--coral);}
.btn.sm{padding:10px 16px;font-size:11px;}

section{padding:70px 0;border-bottom:1px solid var(--rule);}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:34px;flex-wrap:wrap;}
.sec-head h2{font-size:clamp(28px,4.5vw,48px);}
.sec-head .num{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--muted);}

footer{padding:46px 0;color:var(--muted);font-family:'Space Mono',monospace;font-size:12px;text-align:center;}
footer a{color:var(--coral);}
footer .row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}

/* prose for guides */
.prose{max-width:760px;}
.prose h2{font-size:clamp(24px,3.4vw,38px);margin:46px 0 16px;}
.prose h3{font-size:22px;margin:30px 0 10px;color:var(--white);}
.prose p{color:#cfccc7;font-size:16.5px;margin:12px 0;}
.prose ul,.prose ol{color:#cfccc7;font-size:16.5px;margin:12px 0 12px 22px;}
.prose li{margin:7px 0;}
.prose code{font-family:'Space Mono',monospace;background:#181819;border:1px solid var(--rule2);padding:2px 7px;font-size:13px;color:var(--amber);}
.prose .callout{border-left:3px solid var(--coral);background:rgba(255,90,54,.05);padding:16px 20px;margin:22px 0;font-size:15.5px;color:#d8d5d0;}
.prose .callout b{color:var(--coral);}
.prose a.inline{color:var(--coral);border-bottom:1px solid rgba(255,90,54,.4);}
.steps{counter-reset:s;list-style:none;margin-left:0!important;}
.steps>li{counter-increment:s;position:relative;padding:14px 0 14px 52px;border-bottom:1px solid var(--rule);}
.steps>li::before{content:counter(s);position:absolute;left:0;top:12px;width:34px;height:34px;border:1px solid var(--coral);color:var(--coral);
  font-family:'Space Mono',monospace;font-size:14px;display:flex;align-items:center;justify-content:center;border-radius:2px;}

/* table of contents */
.toc{position:sticky;top:90px;font-family:'Space Mono',monospace;font-size:12px;}
.toc a{display:block;padding:7px 0;color:var(--muted);border-left:2px solid var(--rule);padding-left:14px;letter-spacing:.04em;}
.toc a:hover{color:var(--coral);border-left-color:var(--coral);}
.guide-grid{display:grid;grid-template-columns:200px 1fr;gap:48px;}
@media(max-width:860px){.guide-grid{grid-template-columns:1fr;}.toc{position:static;display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}.toc a{border-left:none;border:1px solid var(--rule);padding:8px 12px;}}