/* =========================================================
   RETRO UI — Bold flat retro-desktop website template
   Hand-built CSS (no third-party art). Reused on every page.
   Edit the brand colours in :root to recolour the whole site.
   ========================================================= */
:root{
  /* ---- BRAND PALETTE (edit me) ---- */
  --ink:#161020;          /* near-black outline + text */
  --paper:#ffffff;        /* window body */
  --cyan:#54e6d0;
  --yellow:#ffe14d;
  --magenta:#ff3df0;
  --purple:#7c5cff;
  --blue:#6c7cff;
  --green:#9bf06b;
  /* desktop background */
  --bg1:#9fe9ff;
  --bg2:#c9b8ff;
  --grid:rgba(22,16,32,.07);
  /* structure */
  --bw:3px;               /* border weight */
  --shadow:6px 6px 0 var(--ink);
  --radius:0px;
  --mono:'Space Mono','DM Mono',ui-monospace,monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--mono);color:var(--ink);line-height:1.55;
  background:
    linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 100%) fixed;
  min-height:100vh;position:relative;
}
/* graph-paper grid overlay */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;
}
.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 20px}
img{max-width:100%;display:block}
a{color:inherit}

/* ================= TOP MENU BAR (nav) ================= */
.menubar{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:var(--bw) solid var(--ink);
}
.menubar .inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;
  gap:6px;padding:8px 14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;
  text-decoration:none;white-space:nowrap}
.brand .blip{width:22px;height:22px;background:var(--magenta);
  border:var(--bw) solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;padding:6px 12px;border:var(--bw) solid transparent}
.nav a:hover{background:var(--yellow);border-color:var(--ink)}
.nav a.active{background:var(--cyan);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.clock{margin-left:10px;font-size:.8rem;font-weight:700;border:var(--bw) solid var(--ink);
  padding:5px 10px;background:#fff;white-space:nowrap}
.navtoggle{display:none;margin-left:auto;width:42px;height:38px;background:var(--cyan);
  border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;
  font-size:1.2rem;line-height:1}

/* ================= WINDOW COMPONENT ================= */
.win{background:var(--paper);border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow);margin-bottom:34px}
.win .bar{display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-bottom:var(--bw) solid var(--ink);background:var(--purple);color:#fff;
  font-weight:700;font-size:.85rem}
.win .bar.cyan{background:var(--cyan);color:var(--ink)}
.win .bar.magenta{background:var(--magenta)}
.win .bar.yellow{background:var(--yellow);color:var(--ink)}
.win .bar.blue{background:var(--blue)}
.win .bar.green{background:var(--green);color:var(--ink)}
.dots{display:flex;gap:6px}
.dots span{width:13px;height:13px;border-radius:50%;border:2px solid var(--ink);background:#fff}
.dots .y{background:var(--yellow)} .dots .m{background:var(--magenta)} .dots .c{background:var(--cyan)}
.bar .ttl{font-weight:700;letter-spacing:.3px}
.ctrls{margin-left:auto;display:flex;gap:5px}
.ctrls span{width:22px;height:20px;border:2px solid var(--ink);background:#fff;color:var(--ink);
  display:grid;place-items:center;font-size:.7rem;font-weight:700;line-height:1}
.win .body{padding:22px 24px}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  font-size:.85rem;padding:12px 22px;border:var(--bw) solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);background:#fff;color:var(--ink);
  transition:transform .05s ease,box-shadow .05s ease}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn.magenta{background:var(--magenta);color:#fff}
.btn.purple{background:var(--purple);color:#fff}
.btn.cyan{background:var(--cyan)}
.btn.yellow{background:var(--yellow)}

/* ================= HERO ================= */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:start;
  padding:46px 0 10px}
.hero h1{font-size:2.7rem;line-height:1.08;text-transform:uppercase;margin:6px 0 14px}
.hero h1 .hl{background:var(--yellow);padding:0 8px;border:var(--bw) solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);display:inline-block}
.kicker{display:inline-block;background:var(--magenta);color:#fff;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;font-size:.78rem;padding:6px 12px;
  border:var(--bw) solid var(--ink);box-shadow:3px 3px 0 var(--ink);margin-bottom:8px}
.hero p.lead{font-size:1rem;margin-bottom:22px;max-width:42ch}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* decorative mini-window cluster in hero */
.cluster{position:relative;min-height:340px}
.cluster .win{position:absolute;margin:0;width:100%}
.mini .body{padding:14px 16px;font-size:.82rem}
.loadbar{display:flex;gap:4px;margin-top:8px}
.loadbar i{flex:1;height:16px;background:var(--purple);border:2px solid var(--ink)}
.loadbar i:nth-child(n+7){background:#fff}
.choicebtns{display:flex;gap:10px;margin-top:12px}
.choicebtns .btn{padding:8px 16px;font-size:.78rem;box-shadow:3px 3px 0 var(--ink)}

/* ================= SECTION TITLE ================= */
.sectitle{display:flex;align-items:center;gap:14px;margin:42px 0 22px}
.sectitle h2{font-size:1.5rem;text-transform:uppercase;background:var(--cyan);
  border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:8px 18px}
.sectitle .line{flex:1;height:var(--bw);background:var(--ink)}

/* ================= CARD GRID (work) ================= */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card .thumb{height:150px;border-bottom:var(--bw) solid var(--ink);
  display:grid;place-items:center;font-size:2.4rem;color:var(--ink)}
.card .thumb.a{background:linear-gradient(135deg,var(--cyan),var(--green))}
.card .thumb.b{background:linear-gradient(135deg,var(--magenta),var(--purple))}
.card .thumb.c{background:linear-gradient(135deg,var(--yellow),var(--cyan))}
.card .body{padding:16px 18px}
.card h3{font-size:1rem;text-transform:uppercase;margin-bottom:6px}
.card p{font-size:.82rem}
.tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  background:var(--yellow);border:2px solid var(--ink);padding:2px 8px;margin:8px 6px 0 0}

/* ================= LINK STACK (link-in-bio) ================= */
.linkstack{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto}
.linkstack .btn{justify-content:center;width:100%;padding:16px;font-size:.95rem}

/* ================= FORM FIELDS ================= */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;text-transform:uppercase;font-size:.78rem;margin-bottom:6px}
.field input,.field textarea{width:100%;font-family:var(--mono);font-size:.9rem;
  padding:10px 12px;border:var(--bw) solid var(--ink);background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;background:var(--cyan)}

/* ================= FOOTER ================= */
.footer{border-top:var(--bw) solid var(--ink);background:var(--paper);margin-top:50px}
.footer .inner{max-width:1200px;margin:0 auto;padding:18px 20px;display:flex;
  flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:.8rem}
.footer .soc{display:flex;gap:8px}
.footer .soc a{width:34px;height:34px;border:var(--bw) solid var(--ink);background:var(--yellow);
  display:grid;place-items:center;text-decoration:none;box-shadow:3px 3px 0 var(--ink);font-weight:700}

/* prose blocks */
.prose p{margin-bottom:14px}
.prose h3{text-transform:uppercase;margin:18px 0 8px;font-size:1.05rem}
.muted{opacity:.7;font-size:.8rem}

/* ================= RESPONSIVE ================= */
@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:34px}
  .cluster{min-height:0}
  .cluster .win{position:static;width:100%!important;left:auto!important;top:auto!important;margin-bottom:18px}
  .grid3{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .nav,.clock{display:none}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--paper);border-bottom:var(--bw) solid var(--ink);padding:10px;gap:6px}
  .nav.open a{width:100%}
  .navtoggle{display:block}
  .hero h1{font-size:2rem}
  .grid3{grid-template-columns:1fr}
  .menubar .inner{position:relative}
}