/* kimena.ai — concept mockups. Real Kimena instrument tokens (from web/style.css + Opus art direction).
   No serif anywhere; Geist (variable) + Geist Mono, self-hosted. */

@font-face{font-family:"Geist";src:url("../assets/fonts/geist/Geist-Variable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../assets/fonts/geist/GeistMono-Variable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --font-ui:"Geist",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --font-display:var(--font-ui);
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,"Cascadia Mono",Consolas,"DejaVu Sans Mono",sans-serif;

  --bg:#0a0a0c; --sunken:#070708; --panel:#111114; --panel2:#17171b;
  --panel3:#1f1f24; --hover:#26262c; --screen:#050506;
  --line:rgba(255,255,255,.065); --line2:rgba(255,255,255,.11); --line3:rgba(255,255,255,.18);
  --text:#ededf0; --dim:#9a9aa6; --faint:#868692;
  --acc:#e2b23a; --acc-ink:#1b1306; --acc-soft:rgba(226,178,58,.12); --acc-line:rgba(226,178,58,.38);
  --gold:#e2b23a; --gold-soft:rgba(226,178,58,.12);

  --fs-h1:clamp(44px,6.2vw,92px); --fs-h2:clamp(30px,3.8vw,54px); --fs-h3:19px;
  --fs-lede:clamp(17px,1.35vw,20px); --fs-body:15px; --fs-ui:13px; --fs-meta:11px;
  --tr-h1:-.045em; --tr-h2:-.035em; --tr-h3:-.015em; --tr-ui:-.005em;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --section:clamp(96px,12vw,176px); --gutter:clamp(20px,4vw,48px); --wrap:1160px; --wrap-wide:1440px;
  --r1:4px; --r2:6px; --r3:8px; --r4:12px; --r5:16px; --pill:999px;

  --sh-1:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.45);
  --sh-2:inset 0 1px 0 rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.65);
  --sh-frame:0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.06),
             0 24px 48px -24px rgba(0,0,0,.7),0 60px 140px -40px rgba(0,0,0,.9);
  --focus:0 0 0 3px var(--acc-soft),0 0 0 1px var(--acc-line);
  --ease:cubic-bezier(.2,.8,.2,1); --t-fast:120ms; --t-mid:180ms; --t-slow:260ms; --t-reveal:700ms;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";letter-spacing:var(--tr-ui);overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum";letter-spacing:0}

/* ---------- wordmark ---------- */
.wm{display:inline-flex;align-items:baseline;gap:.08em;font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--text)}
.wm .dot{width:.26em;height:.26em;border-radius:0;background:var(--gold);align-self:flex-end;margin-bottom:.14em}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:60px;display:flex;align-items:center;gap:var(--s5);
  padding:0 var(--gutter);background:rgba(10,10,12,.8);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);z-index:50}
.nav .wm{font-size:20px}
.nav .links{display:flex;gap:var(--s5);margin-left:var(--s5)}
.nav .links a{font-size:var(--fs-ui);font-weight:450;color:var(--dim);letter-spacing:var(--tr-ui);transition:color var(--t-fast) var(--ease)}
.nav .links a:hover{color:var(--text)}
.nav .spacer{flex:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r2);
  font:500 var(--fs-ui)/1 var(--font-ui);letter-spacing:var(--tr-ui);cursor:pointer;border:1px solid transparent;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn.primary{background:var(--acc);color:var(--acc-ink);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--text)}
.btn.ghost:hover{background:var(--hover);border-color:var(--line3)}
.btn.sm{height:30px;padding:0 12px}
.kbd{font-family:var(--font-mono);font-size:11px;padding:2px 6px;border-radius:var(--r1);background:var(--panel3);
  border:1px solid var(--line2);color:var(--faint);line-height:1}

/* ---------- pill / eyebrow ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px;border-radius:var(--pill);
  border:1px solid var(--line2);background:var(--panel);font-family:var(--font-mono);font-size:var(--fs-meta);
  color:var(--faint);letter-spacing:.02em}
.pill .d{width:6px;height:6px;border-radius:50%;background:var(--acc)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--faint);letter-spacing:.02em;text-transform:lowercase}

/* ---------- headline type ---------- */
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600}
h1{font-size:var(--fs-h1);line-height:.98;letter-spacing:var(--tr-h1)}
h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:var(--tr-h2)}
h3{font-size:var(--fs-h3);font-weight:550;line-height:1.25;letter-spacing:var(--tr-h3)}
.gold{color:var(--gold)}
.lede{font-size:var(--fs-lede);line-height:1.5;letter-spacing:-.01em;color:var(--dim);font-weight:400}

/* ---------- THE VIEWER (faithful Kimena frame) ---------- */
.viewer{background:var(--panel);border-radius:var(--r5);box-shadow:var(--sh-frame);overflow:hidden}
.viewer .titlebar{display:flex;align-items:center;height:36px;padding:0 14px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--faint);gap:14px}
.viewer .titlebar .wm{font-size:13px}
.viewer .titlebar .c{flex:1;text-align:center}
.viewer .screenwell{position:relative;background:var(--screen);margin:12px;border-radius:var(--r3);overflow:hidden;
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.viewer .screenwell .pic{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;aspect-ratio:2.39/1;object-fit:cover}
.viewer .meta{display:flex;align-items:center;gap:10px;height:28px;padding:0 14px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--faint)}
.viewer .meta .live{color:var(--acc)}
.viewer .transport{display:flex;align-items:center;gap:14px;height:40px;padding:0 12px;background:var(--panel2);border-top:1px solid var(--line)}
.viewer .play{width:28px;height:28px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer}
.viewer .tc{font-family:var(--font-mono);font-size:13px;color:var(--text);font-feature-settings:"tnum"}
.viewer .tc .dur{color:var(--faint)}
.viewer .transport .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.viewer .jkl{display:flex;gap:3px}
.viewer .mute{color:var(--faint);position:relative}
.viewer .timeline{position:relative;height:64px;padding:8px 12px;display:flex;gap:4px;background:var(--panel)}
.viewer .clip{flex:1;border-radius:var(--r1);background:var(--panel3);border:1px solid var(--line);overflow:hidden;position:relative}
.viewer .clip img{width:100%;height:100%;object-fit:cover;opacity:.82}
.viewer .notemark{position:absolute;top:-1px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg);border-radius:1px;z-index:3}
.viewer .playhead{position:absolute;top:4px;bottom:4px;width:1px;background:var(--acc);z-index:4}
.viewer .playhead::before{content:"";position:absolute;top:-4px;left:-3px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--acc)}

.cap{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--faint);letter-spacing:0}

/* crop marks */
.cropwrap{position:relative}
.cropwrap .cm{position:absolute;width:14px;height:14px;border:0 solid var(--line3)}
.cropwrap .cm.tl{top:-12px;left:-12px;border-top-width:1px;border-left-width:1px}
.cropwrap .cm.tr{top:-12px;right:-12px;border-top-width:1px;border-right-width:1px}
.cropwrap .cm.bl{bottom:-12px;left:-12px;border-bottom-width:1px;border-left-width:1px}
.cropwrap .cm.br{bottom:-12px;right:-12px;border-bottom-width:1px;border-right-width:1px}