/* -----------------------------------------------------------
   thomasthelen.com — dark theme
   adapted from the Start Bootstrap "Grayscale" look
   (hand-written, no Bootstrap/jQuery dependency)
----------------------------------------------------------- */

:root {
  --bg:#000; --fg:#fff; --muted:#b7b7b7; --dim:#9a9a9a;
  --link:#5aa9e6; --nav-border:rgba(255,255,255,.3);
  --line:#161616; --code-bg:#0e0e0e; --code-border:#262626;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:Lora,Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.7;
}
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }

/* ---------------- navbar ---------------- */
.navbar {
  position:fixed; top:0; left:0; width:100%; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  background:#000; border-bottom:1px solid var(--nav-border);
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;
  text-transform:uppercase; padding:0 22px;
}
.brand { display:flex; align-items:center; gap:9px; color:#fff; font-size:18px; letter-spacing:1px; padding:15px 0; }
.brand:hover { text-decoration:none; }
.brand .light { font-weight:400; }
.brand b { font-weight:700; }
.brand svg { width:20px; height:20px; }
.navlinks { display:flex; gap:2px; }
.navlinks a { color:#fff; font-size:12px; letter-spacing:1px; padding:19px 16px; transition:background .25s ease; }
.navlinks a:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.navlinks a.active { background:rgba(255,255,255,.22); }

/* ---------------- hero ---------------- */
.intro { text-align:center; padding:170px 20px 120px; background:radial-gradient(ellipse at bottom,#1a1d22 0%,#000 70%); }
.intro h1 { font-family:Montserrat,sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:3px; font-size:2.6rem; margin:0; }
.intro h1 .light { font-weight:400; }
.intro .tagline { color:#cfcfcf; font-style:italic; margin-top:12px; font-size:1.15rem; }

/* ---------------- sections ---------------- */
section { padding:90px 20px; border-top:1px solid var(--line); }
.container { max-width:820px; margin:0 auto; }
.text-center { text-align:center; }
h2.section-heading { font-family:Montserrat,sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:2px; font-size:2rem; margin:0 0 8px; text-align:center; }
.heading-rule { width:60px; height:3px; background:var(--link); margin:0 auto 34px; }
p { margin:0 0 16px; }
.interests { color:var(--muted); }

/* writing + papers */
h3.year { font-family:Montserrat,sans-serif; font-weight:700; font-size:1.35rem; margin:26px 0 10px; }
ul.papers { margin:0; padding-left:22px; }
ul.papers li { margin:0 0 12px; }
.venue { color:var(--muted); font-style:italic; }
ul.writing { list-style:none; margin:0; padding:0; }
ul.writing li { margin:0 0 10px; display:flex; gap:16px; }
ul.writing .date { color:var(--dim); font-family:Montserrat,sans-serif; font-size:.85rem; min-width:6rem; white-space:nowrap; padding-top:3px; }

/* contact pills */
.pills { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:26px; }
.pills a { display:inline-flex; align-items:center; gap:9px; border:1px solid var(--link); color:var(--link); border-radius:4px; padding:12px 22px; font-family:Montserrat,sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:.8rem; }
.pills a:hover { background:rgba(90,169,230,.14); text-decoration:none; }
.pills svg { width:16px; height:16px; fill:currentColor; }

footer { text-align:center; color:#7d7d7d; font-size:.85rem; padding:40px 20px 60px; border-top:1px solid var(--line); }

/* ---------------- article (blog post / CV) ---------------- */
.post { padding:120px 20px 40px; }
.post .container { max-width:780px; }
.post-title { font-family:Montserrat,sans-serif; font-weight:700; font-size:2rem; line-height:1.2; margin:0 0 6px; }
.post-meta { color:var(--dim); font-family:Montserrat,sans-serif; font-size:.8rem; text-transform:uppercase; letter-spacing:1px; margin:0 0 8px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.back { display:inline-block; font-family:Montserrat,sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:.75rem; margin-bottom:22px; }
.tag { display:inline-block; background:#1e1e1e; border:1px solid var(--code-border); color:var(--muted); font-family:Montserrat,sans-serif; font-size:.62rem; text-transform:uppercase; letter-spacing:1px; padding:2px 8px; }

.post-body { font-size:17px; line-height:1.8; }
.post-body h1,.post-body h2,.post-body h3,.post-body h4 { font-family:Montserrat,sans-serif; color:#fff; line-height:1.3; margin:34px 0 12px; }
.post-body h1 { font-size:1.6rem; }
.post-body h2 { font-size:1.35rem; border-bottom:1px solid var(--line); padding-bottom:6px; }
.post-body h3 { font-size:1.1rem; }
.post-body h4 { font-size:1rem; color:var(--muted); }
.post-body p { margin:0 0 16px; }
.post-body a { text-decoration:underline; }
.post-body ul,.post-body ol { margin:0 0 16px; padding-left:24px; }
.post-body li { margin:0 0 6px; }
.post-body pre { background:var(--code-bg); border:1px solid var(--code-border); border-radius:6px; padding:14px 16px; overflow-x:auto; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.85rem; line-height:1.5; color:#e4e4e4; margin:0 0 18px; }
.post-body code { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.85em; background:#1a1a1a; border:1px solid var(--code-border); border-radius:3px; padding:1px 5px; color:#e6b3a3; }
.post-body pre code { background:none; border:none; padding:0; color:inherit; }
.post-body blockquote { border-left:3px solid var(--link); margin:0 0 18px; padding:2px 16px; color:var(--muted); background:#0d0d0d; }
.post-body table { border-collapse:collapse; width:100%; margin:0 0 18px; font-size:.9rem; }
.post-body th,.post-body td { border:1px solid #2a2a2a; padding:6px 10px; text-align:left; }
.post-body th { background:#151515; font-family:Montserrat,sans-serif; }
.post-body tr:nth-child(even) td { background:#0c0c0c; }
.post-body img { border:1px solid #222; border-radius:4px; margin:10px 0; }
.post-body hr { border:none; border-top:1px solid var(--line); margin:24px 0; }

/* CV lists reuse .post-body inside a wider container */
.cv .container { max-width:820px; }

@media (max-width:640px) {
  .navbar { flex-direction:column; align-items:stretch; padding:0; }
  .brand { justify-content:center; padding:12px; }
  .navlinks { justify-content:center; flex-wrap:wrap; border-top:1px solid var(--line); }
  .navlinks a { padding:12px; }
  .intro { padding-top:210px; }
  .post { padding-top:150px; }
  ul.writing li { flex-direction:column; gap:2px; }
}