/* Kapnagora design system D1 — tokens and shared components (prefix k-).
   Load LAST, after style.css and chrome.css. Spec: DESIGN-D1-SYSTEM.md. */
html:root,html:root[data-theme]{
  /* surfaces: deep green, three steps */
  --bg:#08130e; --bg2:#0d1c15; --panel:#112119; --panel-hi:#16291f;
  --line:rgba(201,162,39,.20); --line2:rgba(242,237,227,.09);
  /* copper = price, primary action, live state; gold = brand hairlines only */
  --copper:#d9884f; --copper-hi:#f0a56e; --copper-soft:rgba(217,136,79,.14);
  --ok:#6fcf97; --amber:#e6b450; --off:#6b7a70;
  /* type scale (mobile first; clamp up on desktop) */
  --t-display:clamp(34px,7.4vw,64px); --t-h2:clamp(24px,4.4vw,34px); --t-h3:18px;
  --t-body:15.5px; --t-small:13px; --t-micro:11.5px; --t-price:clamp(26px,5vw,36px);
  /* spacing (4 px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px; --s7:56px; --s8:88px;
  --r-card:16px; --r-chip:999px; --r-img:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
body{background:var(--bg)}

/* ---------- section header: eyebrow + serif title + optional action ---------- */
.k-sec{margin:var(--s7) 0 0;padding:0}
.k-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin:0 0 var(--s4)}
.k-eyebrow{font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin:0 0 6px;font-weight:600}
.k-sec-head h2{font-family:var(--serif);font-weight:500;font-size:var(--t-h2);letter-spacing:-.01em;line-height:1.1;margin:0}
.k-link{font-size:14px;color:var(--copper-hi);min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.k-link:hover{text-decoration:underline;text-underline-offset:4px}
.k-note{font-size:var(--t-small);color:var(--muted);margin:var(--s3) 0 0;line-height:1.5}

/* ---------- chip ---------- */
.k-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.k-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--r-chip);border:1px solid var(--line2);background:rgba(242,237,227,.04);color:var(--ivory);font-size:14px;transition:background .2s,border-color .2s,transform .15s var(--ease)}
.k-chip small{color:var(--muted);font-size:12px}
a.k-chip:hover,.k-chip:hover{border-color:var(--copper);background:var(--copper-soft)}
.k-chip:active{transform:scale(.96)}
.k-chip--accent{border-color:var(--copper);color:var(--copper-hi)}

/* ---------- stock dot ---------- */
.k-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--off);flex:0 0 8px}
.k-dot--ok{background:var(--ok);box-shadow:0 0 0 3px rgba(111,207,151,.16)}
.k-dot--amber{background:var(--amber);box-shadow:0 0 0 3px rgba(230,180,80,.14)}

/* ---------- price row (dealer / listing): one compact row ---------- */
.k-rows{border:1px solid var(--line2);border-radius:var(--r-card);background:var(--panel);overflow:hidden}
.k-rows .k-row{width:100%;display:grid}
.k-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:14px var(--s4);min-height:68px;border-top:1px solid var(--line2);color:inherit;transition:background .2s}
.k-rows>.k-row:first-child{border-top:0}
a.k-row:hover{background:var(--panel-hi)}
a.k-row:active{background:var(--copper-soft)}
.k-row-flag{font-size:22px;line-height:1;width:30px;text-align:center}
.k-row-main{min-width:0}
.k-row-name{display:block;font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-row-meta{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:12.5px;color:var(--muted);min-width:0}
.k-row-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.k-row-meta .k-dot{flex:none}
.k-row-price{text-align:right}
.k-row-big{display:block;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--copper-hi);font-variant-numeric:tabular-nums;line-height:1.1}
.k-row-big small{font-family:var(--sans);font-size:11.5px;color:var(--muted);font-weight:400}
.k-row-small{display:block;margin-top:3px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.k-row.is-best{background:linear-gradient(90deg,var(--copper-soft),transparent 70%)}
.k-badge{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-hi);border:1px solid var(--copper);border-radius:var(--r-chip);padding:1px 7px}
.k-more{display:flex;width:100%;justify-content:center;align-items:center;min-height:48px;margin-top:var(--s3);border:1px solid var(--line);border-radius:var(--r-chip);background:transparent;color:var(--copper-hi);font-size:14px;transition:background .2s}
.k-more:hover{background:var(--copper-soft)}

/* ---------- spec list: two columns, label over value ---------- */
.k-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5);margin:0;border-top:1px solid var(--line2)}
.k-specs>div{padding:14px 0;border-bottom:1px solid var(--line2);min-width:0}
.k-specs dt{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.k-specs dd{margin:0;font-size:16px;color:var(--ivory);overflow-wrap:anywhere}
.k-specs .k-wide{grid-column:1/-1}

/* ---------- fact card (big number tile) ---------- */
.k-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s3)}
.k-fact{padding:14px 16px;border:1px solid var(--line2);border-radius:var(--r-card);background:var(--panel)}
.k-fact b{display:block;font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.1;color:var(--ivory)}
.k-fact span{display:block;margin-top:4px;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- story card: short title + 2 lines + read more ---------- */
.k-stories{display:grid;gap:var(--s3);grid-template-columns:1fr}
.k-story{padding:var(--s4) var(--s4) var(--s3);border:1px solid var(--line2);border-radius:var(--r-card);background:var(--panel);transition:border-color .2s,transform .2s var(--ease)}
.k-story:hover{border-color:var(--line);transform:translateY(-2px)}
.k-story h3{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);margin:0 0 6px;line-height:1.25}
.k-story p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.k-story.is-open p{-webkit-line-clamp:unset;display:block}
.k-story button{margin-top:6px;min-height:44px;padding:0;border:0;background:none;color:var(--copper-hi);font-size:13.5px}
.k-story-meta{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- image frame ---------- */
.k-frame{position:relative;border-radius:var(--r-img);overflow:hidden;border:1px solid var(--line);background:radial-gradient(70% 70% at 50% 40%,var(--panel-hi),var(--bg2));aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.k-frame img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--ease)}
.k-frame:hover img{transform:scale(1.035)}
.k-frame figcaption{position:absolute;left:12px;bottom:10px;right:12px;font-size:12px;color:var(--muted)}

/* ---------- button ---------- */
.k-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r-chip);border:1px solid var(--copper);background:var(--copper);color:#1b0f06;font-weight:600;font-size:14.5px;transition:transform .15s var(--ease),background .2s}
.k-btn:hover{background:var(--copper-hi)}.k-btn:active{transform:scale(.97)}
.k-btn--ghost{background:transparent;color:var(--copper-hi)}

.k-row:focus-visible,.k-link:focus-visible,.k-more:focus-visible,.k-story button:focus-visible,.k-btn:focus-visible{outline:2px solid var(--copper-hi);outline-offset:3px}

/* ---------- entrance motion (respects reduced motion) ---------- */
@keyframes k-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.k-rise{animation:k-rise .6s var(--ease) both}
.k-rise:nth-child(2){animation-delay:.08s}.k-rise:nth-child(3){animation-delay:.16s}
@media (prefers-reduced-motion:reduce){.k-rise{animation:none}.k-frame img,.k-story,.k-chip{transition:none}}

@media (min-width:720px){
  .k-stories{grid-template-columns:repeat(3,1fr)}
  .k-specs{grid-template-columns:repeat(3,1fr)}
  .k-row{padding:16px 22px}
}