/* site/css/kit.css
   The kit pages, aithari, 2026-10-30. Read with aithari.css. Written pages
   come from scripts/build_kit.py. Compact and app-like, rounded throughout.
   No oxford commas, no em dashes. */

/* hero: words left, a photo card right with one floating app card */
.kh{padding:clamp(36px,5vw,72px) 0;background:radial-gradient(60% 70% at 85% 10%,rgba(94,242,160,.08),transparent 70%),var(--night)}
.kh__in{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:980px){.kh__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.kh__words{display:grid;gap:14px;justify-items:start}
.kh h1{font-size:var(--t-h1);font-weight:600;letter-spacing:-.05em;line-height:1.02}
.kh h1 span{display:block;font-weight:300;color:var(--mist)}
.crumb{display:flex;gap:8px;font-size:13.5px;color:var(--mist)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--star)}
.kh__ph{position:relative;margin:0;border-radius:var(--r4);overflow:hidden;aspect-ratio:4/3;background:#1C2420 center/cover no-repeat;box-shadow:0 40px 80px -40px #000}
.kh__ph figcaption{position:absolute;left:14px;top:12px;font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ac{position:absolute;right:14px;bottom:14px;width:min(280px,calc(100% - 28px));display:grid;gap:8px;padding:14px;border-radius:var(--r3);background:rgba(13,17,23,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(238,241,246,.1),0 20px 40px -16px rgba(0,0,0,.7);color:var(--star);font-size:14px}
.ac__h{display:flex;align-items:center;gap:8px;font:600 13px Inter,sans-serif;color:var(--mist)}
.ac__h i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--night);box-shadow:inset 0 0 0 1px rgba(94,242,160,.3)}
.ac__h i svg{width:11px;height:11px}
.ac small{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--aurora)}
.ac b{font:600 17px/1.25 Sora,sans-serif;letter-spacing:-.02em}
.ac__row{display:flex;justify-content:space-between;gap:10px;padding-top:6px;border-top:1px solid rgba(238,241,246,.08);color:#C9D1DC}
.ac__row span:last-child{font-weight:600;color:var(--star)}
.ac__row .up{color:var(--aurora)!important}
.ac__msg{padding:9px 11px;border-radius:12px 12px 12px 4px;background:#1F2630;color:#DDE3EB;line-height:1.45}
.ac__btn{display:grid;place-items:center;height:34px;border-radius:var(--pill);background:var(--aurora);color:var(--night);font:600 13px Inter,sans-serif;margin-top:2px}
@media (max-width:560px){.kh__ph{aspect-ratio:4/5}.ac{left:12px;right:12px;width:auto}}

/* specs: a gear tag and what's in the kit */
.sp__in{display:grid;gap:14px;margin-top:20px}
@media (min-width:900px){.sp__in{grid-template-columns:1fr 1fr}}
.tag{position:relative;padding:22px 22px 18px}
.tag__hole{position:absolute;right:20px;top:18px;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px #D9CFBC;background:var(--canvas)}
.tag__no{margin:0 0 10px;font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--rust)}
.tag dl{margin:0;display:grid}
.tag dl div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px dashed #DDD3C1;font-size:15px}
.tag dt{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding-top:2px}
.tag dd{margin:0;font-weight:600;text-align:right}
.inkit{padding:22px}
.inkit ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.inkit li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #EAE3D5;font-size:15.5px}
.inkit li:first-child{border-top:0}
.inkit li svg{width:20px;height:20px;flex:none}

/* how it works */
.steps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{display:grid;gap:6px;align-content:start}
.steps small{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--aurora)}
.steps b{font:600 var(--t-h3)/1.25 Sora,sans-serif;letter-spacing:-.02em}
.steps p{font-size:15px;line-height:1.55;color:var(--mist)}

/* pairs */
.pairs{display:grid;gap:12px;margin-top:20px}
@media (min-width:860px){.pairs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pair{position:relative;display:grid;gap:4px;align-content:start;text-decoration:none;padding:20px 48px 20px 20px;transition:transform .2s,box-shadow .2s}
.pair:hover{transform:translateY(-2px)}
.pair small{font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--aurora2)}
.pair b{font:600 18px Sora,sans-serif;letter-spacing:-.02em}
.pair span{font-size:14.5px;color:var(--ink2)}
.pair i{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--ink3);font-size:18px}
.pair--all{background:var(--ink)!important;box-shadow:none!important;color:#fff}
.pair--all small{color:var(--aurora)}
.pair--all span,.pair--all i{color:#B7C0CC}

/* the ask */
.kask{background:var(--aurora);color:var(--night);padding:clamp(48px,6vw,80px) 0}
.kask__in{display:grid;gap:14px;justify-items:start;max-width:760px}
.kask h2{font-size:var(--t-h2);font-weight:600;letter-spacing:-.04em}
.kask p{color:rgba(13,17,23,.75)}

/* the kit index */
.kh--idx .kick{display:block}
.kis{display:grid;gap:12px}
@media (min-width:700px){.kis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.kis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ki{display:grid;overflow:hidden;padding:0!important;text-decoration:none;transition:transform .2s}
.ki:hover{transform:translateY(-2px)}
.ki__ph{display:block;aspect-ratio:16/10;background:#1C2420 center/cover no-repeat}
.ki__t{display:grid;gap:4px;padding:16px 18px 18px}
.ki__t small{font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--rust)}
.ki__t b{font:600 19px Sora,sans-serif;letter-spacing:-.02em}
.ki__t span{font-size:14.5px;color:var(--ink2)}