/* =====================================================================
   SCHLOPP — portfolio
   Visual language: early Steam client UI (c.2003–2004), recolored from
   olive-green to cold grayscale. Fixed-width beveled "application window".
   ===================================================================== */

:root{
  --bg:        #0d0d0d;   /* page backdrop, near-black                */
  --panel-hi:  #2b2b2b;   /* top of main panel gradient               */
  --panel-lo:  #1b1b1b;   /* bottom of main panel gradient            */
  --sidebar:   #131313;   /* inset "Latest News" box                  */
  --ink:       #b6b6b6;   /* body copy                                */
  --ink-dim:   #8c8c8c;   /* secondary copy                           */
  --ink-bright:#f1f1f1;   /* headings / emphasis                      */
  --muted:     #6d6d6d;   /* footer / captions                        */
  --rule:      #454545;   /* borders + dividers                       */
  --rule-soft: #333333;
  --bevel-hi:  #4a4a4a;   /* raised edge highlight                    */
  --bevel-lo:  #050505;   /* raised edge shadow                       */
  --link:      #dcdcdc;
  --link-hov:  #ffffff;
  --accent:    #e6e6e6;   /* section-header underline                 */
  --font-ui: Verdana, Tahoma, Geneva, "DejaVu Sans", sans-serif;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  padding:34px 16px 60px;
  background:
    radial-gradient(120% 80% at 50% -10%, #1a1a1a 0%, var(--bg) 60%) fixed,
    var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:12px;
  line-height:1.55;
  /* faint film-grain so it reads like an aged screenshot */
  background-blend-mode:normal;
}

/* subtle scanline overlay across the whole page */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.014) 0px,
    rgba(255,255,255,0.014) 1px,
    transparent 1px,
    transparent 3px);
  z-index:9999;
  mix-blend-mode:overlay;
}

/* ---------- the application window ---------- */
.window{
  max-width:820px;
  margin:0 auto;
  background:
    linear-gradient(180deg, var(--panel-hi) 0%, var(--panel-lo) 100%);
  border:1px solid var(--rule);
  box-shadow:
    inset 1px 1px 0 var(--bevel-hi),
    inset -1px -1px 0 var(--bevel-lo),
    0 22px 60px rgba(0,0,0,0.75);
  animation:boot .5s ease both;
}
@keyframes boot{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){
  .window{ animation:none; }
}

/* ---------- title / nav bar ---------- */
.titlebar{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  border-bottom:1px solid var(--bevel-lo);
  box-shadow:inset 0 -1px 0 var(--bevel-hi);
  background:linear-gradient(180deg,#242424,#171717);
}
.brandmark{
  display:flex; align-items:center; gap:9px;
  padding:9px 14px;
  border-right:1px solid var(--rule-soft);
  text-decoration:none;
}
.brandmark .emblem{ width:26px; height:26px; display:block; }
.brandmark .wm{
  font-weight:700; letter-spacing:.22em; font-size:12px;
  color:var(--ink-bright); text-transform:uppercase;
}
nav.mainnav{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:2px; padding:0 8px;
}
nav.mainnav a{
  color:var(--ink-dim);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10.5px; font-weight:700;
  padding:10px 12px;
}
nav.mainnav a:hover{ color:var(--link-hov); }
nav.mainnav a[aria-current="page"]{ color:var(--ink-bright); }
nav.mainnav a[aria-current="page"]::after{
  content:""; display:block; height:2px; margin-top:6px;
  background:var(--accent);
}

/* ---------- hero band ---------- */
.hero{
  display:flex; align-items:center; gap:16px;
  padding:22px 26px 18px;
  border-bottom:1px solid var(--rule-soft);
  box-shadow:inset 0 -1px 0 var(--bevel-hi);
}
.hero .bigmark{ width:56px; height:56px; flex:0 0 auto; }
.hero-word{
  font-size:40px; font-weight:800; letter-spacing:.14em;
  color:var(--ink-bright); line-height:1; text-transform:uppercase;
  text-shadow:0 2px 0 #000;
}
.hero-tag{
  margin-top:8px; font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-dim); font-weight:700;
}

/* ---------- main content grid ---------- */
.body-grid{
  display:grid;
  grid-template-columns:1fr 232px;
  gap:26px;
  padding:24px 26px 30px;
}
.body-grid.single{ grid-template-columns:1fr; }
.col-main{ min-width:0; }

/* intro bullet list (the "»" list from the Steam homepage) */
.pitch{ list-style:none; margin:0 0 22px; padding:0; }
.pitch li{
  position:relative; padding:4px 0 4px 22px; color:var(--ink);
}
.pitch li::before{
  content:"»"; position:absolute; left:2px; top:4px;
  color:var(--accent); font-weight:700;
}
.pitch li strong{ color:var(--ink-bright); }

/* section headers ("WHAT IS STEAM?") */
.sec-head{
  font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-bright);
  margin:26px 0 12px; padding-bottom:7px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.sec-head::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:46px; height:1px; background:var(--accent);
}
.col-main > .sec-head:first-child{ margin-top:0; }

p{ margin:0 0 13px; }
p:last-child{ margin-bottom:0; }
em{ color:var(--ink-bright); font-style:italic; }
a{ color:var(--link); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--link-hov); }

/* ---------- beveled buttons (Win2k/XP style) ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-ui);
  font-size:11px; font-weight:700; letter-spacing:.05em;
  color:var(--ink-bright); text-decoration:none;
  background:linear-gradient(180deg,#3a3a3a,#232323);
  border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 #000;
  padding:9px 16px; cursor:pointer;
  text-transform:uppercase;
}
.btn:hover{ background:linear-gradient(180deg,#464646,#2b2b2b); color:#fff; }
.btn:active{
  box-shadow:inset -1px -1px 0 var(--bevel-hi), inset 1px 1px 0 #000;
  background:linear-gradient(180deg,#202020,#2c2c2c);
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn.primary{
  background:linear-gradient(180deg,#565656,#333);
}
.btn.primary:hover{ background:linear-gradient(180deg,#626262,#3b3b3b); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }

/* ---------- "Latest News" sidebar ---------- */
.news{
  background:var(--sidebar);
  border:1px solid var(--bevel-lo);
  box-shadow:inset 1px 1px 0 #2a2a2a;
  padding:14px 15px 16px;
  align-self:start;
}
.news h3{
  margin:0 0 12px; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-bright);
  border-bottom:1px solid var(--rule-soft); padding-bottom:8px;
}
.news-item{ margin:0 0 15px; }
.news-item:last-child{ margin-bottom:0; }
.news-item .n-title{
  color:var(--ink-bright); font-weight:700; font-size:11.5px;
  text-decoration:none; display:inline-block; margin-bottom:3px;
}
.news-item .n-title:hover{ color:#fff; text-decoration:underline; }
.news-item p{ margin:0; color:var(--ink-dim); font-size:11px; }
.news-item .n-date{
  display:block; color:var(--muted); font-size:10px;
  letter-spacing:.08em; margin-bottom:4px; text-transform:uppercase;
}

/* ---------- project cards ---------- */
.cards{ display:flex; flex-direction:column; gap:16px; margin-top:4px; }
.card{
  display:flex; gap:16px;
  background:linear-gradient(180deg,#232323,#191919);
  border:1px solid var(--bevel-lo);
  box-shadow:inset 1px 1px 0 #313131;
  padding:16px;
}
.card .thumb{
  flex:0 0 92px; height:92px;
  background:linear-gradient(135deg,#2e2e2e,#101010);
  border:1px solid #000;
  box-shadow:inset 1px 1px 0 #3d3d3d;
  display:flex; align-items:center; justify-content:center;
}
.card .thumb svg{ width:46px; height:46px; opacity:.85; }
.card-body{ min-width:0; }
.card-body h3{
  margin:0 0 3px; font-size:15px; letter-spacing:.06em;
  color:var(--ink-bright); text-transform:uppercase; font-weight:800;
}
.card-body .meta{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.card-body p{ font-size:11.5px; color:var(--ink); }
.card-body .links{ margin-top:10px; display:flex; gap:14px; flex-wrap:wrap; }
.card-body .links a{ font-size:11px; }
.badge{
  display:inline-block; margin-left:8px; vertical-align:middle;
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-bright); background:#000;
  border:1px solid var(--rule); padding:2px 7px; font-weight:700;
}

/* ---------- devlog index ---------- */
.log-list{ display:flex; flex-direction:column; }
.log-entry{
  padding:16px 0; border-bottom:1px solid var(--rule-soft);
}
.log-entry:first-child{ padding-top:2px; }
.log-entry .l-date{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px;
}
.log-entry h3{ margin:0 0 6px; font-size:16px; }
.log-entry h3 a{ color:var(--ink-bright); text-decoration:none; letter-spacing:.03em; }
.log-entry h3 a:hover{ color:#fff; text-decoration:underline; }
.log-entry p{ font-size:11.5px; color:var(--ink-dim); }
.log-entry .more{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- devlog article (matches uploaded-doc formatting) ---------- */
.doc{ font-size:12.5px; line-height:1.7; color:var(--ink); }
.doc .doc-meta{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.doc h1{
  font-size:26px; letter-spacing:.03em; color:var(--ink-bright);
  margin:0 0 14px; line-height:1.15; font-weight:800;
}
.doc h2{
  font-size:17px; color:var(--ink-bright); margin:26px 0 10px;
  padding-bottom:6px; border-bottom:1px solid var(--rule-soft); letter-spacing:.02em;
}
.doc h3{ font-size:14px; color:var(--ink-bright); margin:20px 0 8px; }
.doc p{ margin:0 0 14px; }
.doc ul,.doc ol{ margin:0 0 14px; padding-left:22px; }
.doc li{ margin:5px 0; }
.doc blockquote{
  margin:16px 0; padding:10px 16px; color:var(--ink-dim);
  border-left:3px solid var(--rule); background:rgba(0,0,0,.25); font-style:italic;
}
.doc figure{ margin:18px 0; }
.doc .figph{
  height:220px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#242424,#0e0e0e);
  border:1px solid #000; box-shadow:inset 1px 1px 0 #333;
  color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.doc figcaption{ margin-top:7px; font-size:10.5px; color:var(--muted); text-align:center; }
.doc hr{ border:0; border-top:1px solid var(--rule-soft); margin:26px 0; }
.doc code{
  font-family:"DejaVu Sans Mono",Consolas,monospace; font-size:11px;
  background:#000; border:1px solid var(--rule-soft); padding:1px 5px;
}

/* share bar on devlog articles */
.sharebar{
  margin:30px 0 4px; padding:14px 16px;
  background:var(--sidebar); border:1px solid var(--bevel-lo);
  box-shadow:inset 1px 1px 0 #2a2a2a;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.sharebar .lbl{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:700; margin-right:2px;
}
.copyfield{
  flex:1 1 220px; min-width:0;
  display:flex; align-items:center; gap:8px;
}
.copyfield input{
  flex:1; min-width:0; font-family:var(--font-ui); font-size:11px;
  color:var(--ink); background:#0a0a0a; border:1px solid #000;
  box-shadow:inset 1px 1px 0 #222; padding:7px 9px;
}
.copy-note{ font-size:10.5px; color:var(--ink-bright); letter-spacing:.06em; }

/* back link */
.backlink{
  display:inline-block; margin-bottom:18px; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
  text-decoration:none;
}
.backlink:hover{ color:#fff; }
.backlink::before{ content:"« "; color:var(--accent); }

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--bevel-hi);
  box-shadow:inset 0 1px 0 var(--bevel-lo);
  background:linear-gradient(180deg,#171717,#0f0f0f);
  padding:16px 22px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.foot .copy{
  font-size:10px; letter-spacing:.06em; color:var(--muted);
}
.foot .copy b{ color:var(--ink-dim); font-weight:700; letter-spacing:.18em; }
.socials{ display:flex; flex-wrap:wrap; gap:2px; }
.socials a{
  color:var(--ink-dim); text-decoration:none; font-size:9.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 9px;
}
.socials a:hover{ color:#fff; }
.socials .sep{ color:var(--rule); padding:6px 0; }

/* ---------- responsive ---------- */
@media (max-width:680px){
  body{ padding:14px 8px 40px; }
  .titlebar{ flex-direction:column; }
  .brandmark{ border-right:0; border-bottom:1px solid var(--rule-soft); justify-content:center; }
  nav.mainnav{ justify-content:center; padding:2px 4px; }
  .body-grid{ grid-template-columns:1fr; gap:22px; padding:20px 16px 24px; }
  .hero{ padding:18px 16px; }
  .hero-word{ font-size:30px; }
  .card{ flex-direction:column; }
  .card .thumb{ flex-basis:auto; width:100%; height:120px; }
  .foot{ flex-direction:column; align-items:flex-start; }
}