/* jumpcut.GG guide — def2 design language, hand-rolled static page.
   Same tokens as the app's gg-theme; no framework, no build step. */

@font-face { font-family:'Hanken Grotesk'; src:url(fonts/HankenGrotesk-400.ttf); font-weight:400; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url(fonts/HankenGrotesk-600.ttf); font-weight:600; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url(fonts/HankenGrotesk-700.ttf); font-weight:700; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url(fonts/SpaceGrotesk-600.ttf); font-weight:600; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url(fonts/SpaceGrotesk-700.ttf); font-weight:700; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url(fonts/JetBrainsMono-400.ttf); font-weight:400; font-display:swap; }
@font-face { font-family:'Outfit'; src:url(fonts/Outfit-700.ttf); font-weight:700; font-display:swap; }

:root {
  color-scheme: dark;
  --bg:#16181d; --panel:#121419; --well:#0e0f12;
  --card:#1c1f26; --chip:#1d2027; --control:#20242a; --inset:#15171c;
  --divider:rgba(255,255,255,.07);
  --text:#e4e7ec; --text2:#a6abb4; --muted:#6e737c; --faint:#5f646d;
  --lime:#ff8a2e; --on-lime:#2a1200; --lime-rgb:255,138,46;
  --danger:#e0584f;
  --f-head:'Space Grotesk',system-ui,sans-serif;
  --f-gg:'Outfit',system-ui,sans-serif;
  --f-body:'Hanken Grotesk',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.65 var(--f-body); }

a { color:var(--lime); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---- layout: sticky nav rail + content column ---- */
.wrap { display:flex; max-width:1200px; margin:0 auto; gap:40px; padding:0 24px; }
nav.rail { flex:0 0 210px; position:sticky; top:0; align-self:flex-start;
           max-height:100vh; overflow-y:auto; padding:28px 0 40px; }
main { flex:1 1 auto; min-width:0; padding:24px 0 90px; }

.brand { display:block; }
.brand img { width:150px; height:auto; display:block; max-width:100%; }   /* wordmark-v2 lockup, same asset as jumpcut.gg */
nav.rail img { max-width:100%; height:auto; }   /* nothing in the rail may stretch the layout */
.brand-sub { font-family:var(--f-mono); font-size:10px; color:var(--muted); margin:4px 0 12px; }
/* scoped past the generic nav.rail a rules, which were winning on specificity
   (gray ink + dark hover leaked onto the chip) */
nav.rail a.rail-steam { display:inline-block; background:var(--lime); color:var(--on-lime); font-weight:600;
              font-size:12.5px; padding:5px 12px; border-radius:5px; margin:0 0 14px; }
nav.rail a.rail-steam:hover { background:#ffa054; color:var(--on-lime); text-decoration:none; }

nav.rail a { display:block; padding:4px 10px; margin:1px 0; border-radius:5px;
             color:var(--text2); font-size:13px; }
nav.rail a:hover { background:var(--control); color:var(--text); text-decoration:none; }
nav.rail .grp { font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
                color:var(--muted); margin:18px 0 5px 10px; }

/* ---- typography ---- */
h1 { font-family:var(--f-head); font-weight:700; font-size:32px; line-height:1.2; margin:34px 0 8px; }
.lede { color:var(--text2); font-size:16px; max-width:640px; margin:0 0 10px; }
h2 { font-family:var(--f-head); font-weight:700; font-size:22px; margin:58px 0 12px; padding-top:18px;
     border-top:1px solid var(--divider); }
h3 { font-family:var(--f-head); font-weight:600; font-size:16px; margin:26px 0 8px; }
p { margin:10px 0; color:var(--text2); max-width:72ch; }
p strong, li strong { color:var(--text); font-weight:600; }
ul, ol { color:var(--text2); padding-left:22px; max-width:70ch; }
li { margin:5px 0; }
li::marker { color:var(--muted); }

kbd { font-family:var(--f-mono); font-size:11.5px; background:var(--control); color:var(--text);
      border-radius:4px; padding:1.5px 6px 2.5px; border:1px solid rgba(255,255,255,.12);
      border-bottom-width:2px; white-space:nowrap; }
code { font-family:var(--f-mono); font-size:12.5px; background:var(--well); color:var(--text2);
       border-radius:4px; padding:1px 5px; }

/* ui-name: how we reference on-screen controls in prose */
.ui { color:var(--text); font-weight:600; }

/* ---- steps: the numbered workflow blocks ---- */
.steps { counter-reset:step; margin:14px 0; padding:0; list-style:none; max-width:72ch; }
.steps li { counter-increment:step; position:relative; padding:0 0 2px 40px; margin:12px 0; }
.steps li::before { content:counter(step); position:absolute; left:0; top:1px;
  width:24px; height:24px; border-radius:50%; background:var(--control); color:var(--lime);
  font-family:var(--f-mono); font-size:12px; display:flex; align-items:center; justify-content:center; }

/* ---- callouts (tonal, no border accents) ---- */
.tip { background:var(--card); border-radius:9px; padding:12px 16px; margin:16px 0; max-width:72ch;
       color:var(--text2); font-size:14px; }
.tip b { color:var(--lime); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em;
         text-transform:uppercase; display:block; margin-bottom:3px; }

/* ---- screenshots: same measure as the paragraphs, never wider ---- */
figure { margin:18px 0; max-width:72ch; }
figure img { max-width:100%; width:auto; display:block; border-radius:9px; background:var(--well); }   /* wide shots cap at the measure; small panel crops stay natural-size (never upscaled blurry) */
figcaption { font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-top:7px; }

/* ---- shortcut table ---- */
table { border-collapse:collapse; margin:14px 0; }
td { padding:6px 22px 6px 0; color:var(--text2); font-size:14px; vertical-align:top; }
td:first-child { white-space:nowrap; }

/* ---- footer ---- */
footer { margin-top:70px; padding-top:16px; border-top:1px solid var(--divider);
         font-family:var(--f-mono); font-size:11px; color:var(--muted); }

/* ---- small screens: rail becomes a top block ---- */
@media (max-width: 880px) {
  .wrap { flex-direction:column; gap:0; }
  nav.rail { position:static; max-height:none; flex:0 0 auto; padding-bottom:0;
             display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; }
  nav.rail .grp { width:100%; margin:10px 0 2px; }
  .brand, .brand-sub { width:100%; }
}