@import "tokens.css?v=5";
/* ============================================================
   Projects / shell pages — "Knipsel TTY"
   CRT terminal-noir structure + Afrikaans-zine collage content.
   Shares this file with: badges, colophon, counter, project-*.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg);}
body{
  font-family:var(--body);
  line-height:1.65;color:var(--text);min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(700px 500px at 85% -8%,rgba(79,214,224,0.07),transparent 60%),
    radial-gradient(600px 450px at 0% 8%,rgba(217,180,91,0.05),transparent 55%),
    var(--bg);
}

/* ---- Global starfield (behind content, toggleable via .no-scan) ---- */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,var(--star),transparent 60%),
    radial-gradient(1px 1px at 27% 62%,var(--star-2),transparent 60%),
    radial-gradient(1px 1px at 42% 30%,var(--star-2),transparent 60%),
    radial-gradient(1.6px 1.6px at 58% 78%,var(--star-gold),transparent 60%),
    radial-gradient(1px 1px at 66% 12%,var(--star-2),transparent 60%),
    radial-gradient(1.3px 1.3px at 74% 46%,var(--star-cyan),transparent 60%),
    radial-gradient(1px 1px at 83% 68%,var(--star-2),transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 24%,var(--star),transparent 60%),
    radial-gradient(1px 1px at 8% 85%,var(--star-2),transparent 60%),
    radial-gradient(1.2px 1.2px at 35% 90%,var(--star),transparent 60%),
    radial-gradient(1px 1px at 50% 55%,var(--star-2),transparent 60%),
    radial-gradient(1.1px 1.1px at 20% 42%,var(--star),transparent 60%);
  background-repeat:repeat;background-size:540px 540px;
}
body.no-scan::before{display:none;}

h1,h2,h3,.logo{font-family:var(--serif);letter-spacing:-0.02em;line-height:1.15;}
a{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm);box-shadow:var(--glow);}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.phero h1{animation:none;}}

/* ============================================================
   TOP BAR — terminal prompt + nav
   ============================================================ */
.bar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.8rem 1.4rem;max-width:var(--maxw);margin:0 auto;width:100%;
  background:rgba(11,16,38,0.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border-2);
  font-family:var(--mono);
}
.bar .logo{
  font-size:1.05rem;font-weight:700;color:var(--accent);
  text-decoration:none;letter-spacing:0.02em;
  display:flex;align-items:center;gap:.4rem;
}
.bar .logo::before{content:">";color:var(--accent-3);font-weight:400;opacity:.7;}
.bar .logo:hover{color:var(--accent-2);text-shadow:var(--glow);}
.bar nav{display:flex;gap:.2rem;flex-wrap:wrap;align-items:center;}
.bar nav a{
  color:var(--text-mut);text-decoration:none;font-size:.82rem;font-weight:400;
  padding:.35rem .7rem;border-radius:var(--radius-sm);
  transition:color .2s,background .2s;
  font-family:var(--mono);
}
.bar nav a:hover{color:var(--accent);background:var(--surface);}
.bar nav a[aria-current]{color:var(--accent);background:var(--surface-2);border-bottom:1px solid var(--accent);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1.4rem 5rem;}

/* ============================================================
   PAGE / PROJECT HERO — man-page header + zine stamp
   ============================================================ */
.phero{padding:3rem 0 1.5rem;border-bottom:1px solid var(--border-2);margin-bottom:2.5rem;position:relative;}
/* Terminal prompt prefix on the eyebrow */
.eyebrow{
  font-family:var(--mono);color:var(--accent-3);font-weight:400;
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;
  margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem;
}
.eyebrow::before{content:"$";color:var(--accent);opacity:.6;}
.phero h1{
  font-size:clamp(2rem,5vw,3.2rem);
  background:var(--grad);background-size:220% auto;
  animation:hue-pan 14s var(--ease) infinite alternate;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px rgba(79,214,224,0.20));
}
.phero .tagline{color:var(--text-mut);font-size:1.12rem;max-width:62ch;margin-top:.9rem;font-family:var(--body);}

/* Zine stamp — a rotated oxblood rubber-stamp badge */
.stamp{
  position:absolute;top:2.5rem;right:0;
  font-family:var(--mono);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--oxblood);
  border:2px solid var(--oxblood);
  padding:.35rem .7rem;border-radius:2px;
  transform:rotate(-8deg);
  opacity:.85;
  box-shadow:var(--glow-ox);
  background:rgba(201,106,74,0.05);
}
@media(max-width:600px){.stamp{position:static;display:inline-block;margin-bottom:1rem;}}

.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem;}

/* ---- Buttons — terminal-style, sharp corners ---- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-weight:600;font-size:.88rem;
  padding:.65rem 1.2rem;border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:transform .2s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .25s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent);color:#0a0a0a;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-2);box-shadow:var(--glow);}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--glow);}

/* ---- Tech chips — terminal tags ---- */
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.2rem;}
.chip{
  font-family:var(--mono);font-size:.75rem;font-weight:400;color:var(--text-mut);
  background:var(--surface);border:1px solid var(--border-2);
  padding:.3rem .6rem;border-radius:var(--radius-sm);
}
.chip::before{content:"[";color:var(--accent);opacity:.5;}
.chip::after{content:"]";color:var(--accent);opacity:.5;}

/* ============================================================
   SECTIONS — man-page blocks
   ============================================================ */
.section{margin-top:3rem;}
.section h2{
  font-size:1.45rem;margin-bottom:1rem;
  font-family:var(--mono);font-weight:700;
  color:var(--accent-2);
  display:flex;align-items:center;gap:.5rem;
}
.section h2::before{content:"##";color:var(--accent-3);opacity:.5;font-weight:400;}
.section p{color:var(--text-mut);max-width:72ch;}
.section p strong,.section li strong{color:var(--text-bright);}
.section code{font-family:var(--mono);font-size:.88em;color:var(--accent-2);background:var(--surface);padding:.1em .3em;border-radius:2px;}

/* ---- Feature cards — terminal panels ---- */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.2rem;}
.feat{
  background:var(--surface);border:1px solid var(--border-2);
  border-left:2px solid var(--accent);
  border-radius:var(--radius-sm);padding:1.2rem;
  transition:border-color .25s,background .25s;
}
.feat:hover{border-left-color:var(--accent-3);background:var(--surface-2);}
.feat h3{font-size:1.02rem;margin-bottom:.4rem;font-family:var(--mono);color:var(--accent-2);}
.feat h3::before{content:"▸ ";color:var(--accent-3);opacity:.6;}
.feat p{color:var(--text-mut);font-size:.94rem;}

/* ---- Key-facts list — terminal output ---- */
.kv{list-style:none;display:grid;gap:.5rem;margin-top:1rem;font-family:var(--mono);font-size:.92rem;}
.kv li{display:flex;gap:.6rem;align-items:baseline;color:var(--text);}
.kv li::before{content:"›";color:var(--accent);flex:none;}

/* ---- Callout — zine margin note on kraft paper ---- */
.note{
  margin-top:1.4rem;padding:1rem 1.2rem;
  border-left:3px solid var(--oxblood);
  background:var(--kraft);color:var(--ink-blue);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.95rem;font-family:var(--body);
  position:relative;
  box-shadow:2px 3px 0 rgba(0,0,0,0.3);
}
.note::before{
  content:"";position:absolute;top:-1px;left:-3px;bottom:-1px;width:3px;
  background:repeating-linear-gradient(var(--oxblood) 0 4px,transparent 4px 8px);
  opacity:.4;
}
.note strong{color:var(--oxblood);}

/* ---- Cover image — kraft-paper clipping with torn edge ---- */
.cover{
  width:100%;height:auto;border-radius:var(--radius-sm);
  border:1px solid var(--border-2);margin:1.6rem 0 0;display:block;
  box-shadow:var(--shadow);
}

/* ============================================================
   HUB: project cards — scattered zine clippings on terminal grid
   ============================================================ */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.4rem;margin-top:2rem;
}
.pcard{
  display:flex;flex-direction:column;
  background:var(--kraft);color:var(--ink-blue);
  border:1px solid var(--kraft-2);
  border-radius:var(--radius-sm);
  padding:1.5rem;text-decoration:none;
  position:relative;
  box-shadow:3px 4px 0 rgba(0,0,0,0.4),0 12px 30px rgba(0,0,0,0.3);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.pcard:nth-child(odd){transform:rotate(-.6deg);}
.pcard:nth-child(even){transform:rotate(.4deg);}
.pcard:nth-child(3n){transform:rotate(-.2deg);}
.pcard:hover{
  transform:rotate(0) translateY(-6px) scale(1.02);
  box-shadow:5px 8px 0 rgba(0,0,0,0.5),0 20px 50px rgba(0,0,0,0.4);
  z-index:5;
}
/* Tape strip on top corner */
.pcard::before{
  content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:60px;height:18px;
  background:rgba(217,180,91,0.22);
  border:1px solid rgba(217,180,91,0.15);
}
.pcard .ico{font-size:1.8rem;filter:none;line-height:1;}
.pcard h3{
  font-size:1.2rem;margin:.6rem 0 .4rem;
  font-family:var(--serif);color:var(--ink-blue);
}
.pcard p{color:#5a5044;font-size:.93rem;flex:1;font-family:var(--body);}
.pcard .tag{
  margin-top:.9rem;color:var(--oxblood);font-weight:700;font-size:.82rem;
  font-family:var(--mono);
}
.pcard .tag::before{content:"→ ";}
.pcard .live{
  display:inline-block;margin-left:.5rem;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--kraft);background:var(--oxblood);
  padding:.15rem .5rem;border-radius:2px;vertical-align:middle;
  font-family:var(--mono);
}

/* ============================================================
   FOOTER — terminal sign-off
   ============================================================ */
footer{
  border-top:1px solid var(--border-2);margin-top:4rem;
  padding:2rem 1.4rem;text-align:center;
  color:var(--text-mut);font-size:.85rem;
  font-family:var(--mono);
}
footer a{color:var(--text-mut);}
footer a:hover{color:var(--accent);}
footer::before{
  content:"";display:block;width:60px;height:1px;margin:0 auto 1.5rem;
  background:var(--accent);opacity:.4;
}