/* ============================================================
   GENUARY 2026 — Nathan Boisleux — shared site styles
   Aesthetic: pen-plotter terminal. Black paper, plotter ink in
   signature blue (#013ABB) and yellow (#F7EB23). Monospace.
   ============================================================ */
:root{
  --bg:#0a0a0a;
  --ink:#f5f5f5;
  --blue:#013ABB;
  --yellow:#F7EB23;
  --red:#8F080E;
  --green:#005B51;
  --paper:#e8e4d8;
  --mono:"Courier New",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  line-height:1.5;
  -webkit-font-smoothing:none;
}
a{color:var(--yellow);text-decoration:none;border-bottom:1px dotted var(--yellow)}
a:hover{color:var(--bg);background:var(--yellow)}

/* ---- top nav bar (site-wide) ---- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  padding:.5rem .9rem;
  background:#000;border-bottom:2px solid var(--yellow);
}
.topbar .brand{
  font-weight:bold;letter-spacing:.05em;color:var(--yellow);
  border:none;margin-right:auto;text-transform:uppercase;
}
.topbar a{font-size:.85rem;padding:.15rem .5rem;border:1px solid #333;border-bottom:1px solid #333}
.topbar a:hover{border-color:var(--yellow)}

/* ---- page wrapper ---- */
.wrap{max-width:1200px;margin:0 auto;padding:2rem 1.2rem 5rem}
h1.page-title{
  font-size:clamp(1.8rem,6vw,3.4rem);margin:.2rem 0 1.4rem;
  color:var(--yellow);letter-spacing:.04em;text-transform:uppercase;
}
.lead{max-width:62ch;color:#cfcfcf;margin-bottom:2rem}

/* ============================================================
   GALLERY GRID
   ============================================================ */
.grid{
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.card{
  position:relative;border:1px solid #2a2a2a;background:#111;
  cursor:pointer;overflow:hidden;transition:transform .15s,border-color .15s;
}
.card:hover{transform:translateY(-4px) rotate(-.4deg);border-color:var(--yellow)}
.card .thumb{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#fff}
.card .meta{padding:.5rem .6rem .7rem}
.card .daynum{
  position:absolute;top:0;left:0;background:var(--yellow);color:#000;
  font-weight:bold;font-size:.75rem;padding:.15rem .45rem;
}
.card .ttl{font-size:.82rem;color:var(--ink);display:block;min-height:2.4em}
.card .pal{font-size:.68rem;color:#888;margin-top:.25rem}

/* ============================================================
   MODAL (live sketch)
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(0,0,0,.92);
  align-items:center;justify-content:center;padding:1.2rem;
}
.modal.open{display:flex}
.modal-inner{
  width:min(900px,95vw);max-height:92vh;display:flex;flex-direction:column;
  border:2px solid var(--yellow);background:#000;
}
.modal-head{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-bottom:1px solid #333}
.modal-head .mday{background:var(--yellow);color:#000;font-weight:bold;padding:.1rem .5rem}
.modal-head .mttl{color:var(--ink);font-size:.95rem;flex:1}
.modal-head button{
  background:#000;color:var(--yellow);border:1px solid var(--yellow);
  font-family:var(--mono);cursor:pointer;padding:.2rem .6rem;font-size:1rem;
}
.modal-head button:hover{background:var(--yellow);color:#000}
.modal-body{display:flex;flex-wrap:wrap;min-height:0}
.modal-body iframe{flex:1 1 380px;border:0;background:#0a0a0a;min-height:420px;height:60vh}
.modal-body .info{flex:1 1 280px;padding:1rem;border-left:1px solid #333;overflow:auto}
.modal-body .info p{color:#cfcfcf;font-size:.85rem}
.modal-body .info .label{color:var(--yellow);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-top:1rem}
.modal-body .info a.run{display:inline-block;margin-top:1rem;border:1px solid var(--yellow);padding:.3rem .7rem}

/* ============================================================
   CHATBOT
   ============================================================ */
#bot-toggle{
  position:fixed;right:1rem;bottom:1rem;z-index:90;
  background:var(--yellow);color:#000;border:2px solid #000;
  font-family:var(--mono);font-weight:bold;cursor:pointer;
  padding:.7rem 1rem;box-shadow:4px 4px 0 #000;
}
#bot-toggle:hover{background:#000;color:var(--yellow);border-color:var(--yellow)}
#bot-panel{
  position:fixed;right:1rem;bottom:4.2rem;z-index:95;width:min(360px,92vw);
  height:min(520px,70vh);display:none;flex-direction:column;
  background:#0d0d0d;border:2px solid var(--yellow);box-shadow:6px 6px 0 rgba(0,0,0,.6);
}
#bot-panel.open{display:flex}
#bot-panel .bot-head{background:var(--yellow);color:#000;padding:.5rem .7rem;font-weight:bold;display:flex;justify-content:space-between;align-items:center}
#bot-panel .bot-head small{font-weight:normal;opacity:.7}
#bot-log{flex:1;overflow:auto;padding:.7rem;display:flex;flex-direction:column;gap:.5rem}
.msg{max-width:85%;padding:.45rem .6rem;font-size:.82rem;border:1px solid #333;white-space:pre-wrap;word-break:break-word}
.msg.bot{align-self:flex-start;background:#161616;border-left:3px solid var(--blue)}
.msg.user{align-self:flex-end;background:#1d1d1d;border-right:3px solid var(--yellow);color:var(--yellow)}
.bot-suggest{display:flex;flex-wrap:wrap;gap:.3rem;padding:.4rem .6rem;border-top:1px solid #222}
.bot-suggest button{background:#000;color:var(--ink);border:1px solid #444;font-family:var(--mono);font-size:.7rem;padding:.2rem .4rem;cursor:pointer}
.bot-suggest button:hover{border-color:var(--yellow);color:var(--yellow)}
#bot-form{display:flex;border-top:2px solid var(--yellow)}
#bot-input{flex:1;background:#000;color:var(--ink);border:0;padding:.6rem;font-family:var(--mono);font-size:.85rem}
#bot-input:focus{outline:1px solid var(--yellow)}
#bot-form button{background:var(--yellow);color:#000;border:0;font-family:var(--mono);font-weight:bold;padding:0 1rem;cursor:pointer}

/* ============================================================
   ABOUT / PROJECT prose pages
   ============================================================ */
.prose{max-width:70ch}
.prose h2{color:var(--yellow);margin-top:2.2rem;border-bottom:1px solid #333;padding-bottom:.3rem}
.prose p{color:#d8d8d8}
.prose ul{color:#d8d8d8}
.prose a{color:var(--yellow)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1rem;margin:1rem 0}
.kv dt{color:var(--yellow)}
.kv dd{margin:0;color:#d8d8d8}
.qr-wrap{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin:1.5rem 0;padding:1.2rem;border:1px dashed #444}
.qr-wrap img{width:180px;height:180px;background:#fff;padding:8px}

footer.site{border-top:1px solid #222;padding:2rem 1.2rem;color:#666;font-size:.78rem;text-align:center}