/* r00t_journal — tungtunghook skin: grey noise panels, bevel borders,
   shimmering rainbow line, gradient grey buttons. */

:root{
  --bg:#0a0a0a;
  --panel:#141416;
  --panel-2:#1b1b1d;
  --line:#3c3c3c;       /* light bevel line   */
  --line-dark:#282828;  /* dark bevel line    */
  --line-soft:#202024;
  --edge:#050505;       /* outer hard edge    */
  --text:#cccccc;
  --muted:#9a9a9a;
  --dim:#6a6a6a;
  --white:#e9e9e9;
  --accent:#cbcbcb;     /* kept grey on purpose — no neon */
  --accent-soft:#e9e9e9;

  /* gradient grey buttons (straight from the splash) */
  --btn:linear-gradient(0deg,#191919,#232323);
  --btn-hover:linear-gradient(0deg,#232323,#343434);
  --btn-active:linear-gradient(0deg,#232323,#191919);

  /* 8px noise tile, identical to the splash box */
  --noise:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAlSURBVChTYxAREfnPw8PzHxeNogCGkfnEmQDDyDph/IF3A89/ABQxTIGh/maWAAAAAElFTkSuQmCC');

  /* layered border bevel: light / dark(3px) / light, over the hard edge */
  --bevel:inset 0 0 0 1px #3c3c3c, inset 0 0 0 4px #282828, inset 0 0 0 5px #3c3c3c;
  --bevel-1:inset 0 0 0 1px #3c3c3c;   /* light bevel for small tiles */

  --engrave:1px 1px 0 #050505;

  --radius:0px;         /* square edges — win98 / doxbin vibe */
  --mono:'Consolas','SF Mono','Menlo',ui-monospace,monospace;
  --sans:'Verdana','Geneva',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body,.blog-root{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.blog-root{max-width:1600px;margin:0 auto;padding:24px clamp(16px,5vw,64px);min-height:100vh}

/* ── reusable panel: noise + bevel + hard edge ── */
.header-box,.nav-bar,.sidebar-box,.gif-box,.post-card,.footer-bar,
.about-wrap,.contact-wrap,.empty-state{
  background:var(--panel) var(--noise) repeat;
  border:1px solid var(--edge);
  box-shadow:var(--bevel);
  border-radius:var(--radius);
}

/* ── the shimmering rainbow line (splash signature) ── */
@keyframes shimmer{
  0%{background-position:-100% 50%}
  100%{background-position:100% 50%}
}
.header-box,.post-card{position:relative;overflow:hidden}
.header-box::before,.post-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background-image:linear-gradient(to right,#38b0da,#cb46cd,#cce335,#cb46cd,#38b0da);
  background-size:200% 100%;
  animation:shimmer 2s linear infinite;
  z-index:2;
}
/* a faint static under-line, like rainbow-3 */
.header-box::after{
  content:"";position:absolute;top:2px;left:0;right:0;height:1px;background:#090909;
}

/* marquee -> static notice strip */
.marquee-bar{
  background:var(--panel) var(--noise) repeat;
  border:1px solid var(--edge);
  box-shadow:var(--bevel-1);
  padding:8px 14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:14px;
}
.marquee-inner{display:block;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.3px}

/* header */
.header-box{text-align:center;padding:24px 16px 18px;margin-bottom:14px}
.ascii-skull{font-family:var(--mono);font-size:12px;color:var(--dim);line-height:1.2;white-space:pre;display:block;margin-bottom:10px}
.header-box h1{
  font-family:var(--sans);
  font-weight:bold;
  font-size:28px;
  color:var(--white);
  letter-spacing:.5px;
  line-height:1.1;
  text-shadow:var(--engrave);
}
.tagline{color:var(--muted);font-size:12px;margin-top:8px;letter-spacing:.3px;text-shadow:var(--engrave)}
.counter{
  color:var(--muted);font-family:var(--mono);font-size:11px;margin-top:12px;
  background:var(--btn);border:1px solid #323232;display:inline-block;padding:3px 10px;text-shadow:var(--engrave);
}
.counter #visitor-count{color:var(--white);font-weight:bold}
.blink{color:var(--white);animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* navbar */
.nav-bar{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  padding:8px;margin-bottom:14px;
}
.nav-bar a{
  color:var(--text);
  text-decoration:none;
  padding:6px 16px;
  font-weight:bold;
  font-size:12px;
  background:var(--btn);
  border:1px solid #323232;
  text-shadow:var(--engrave);
}
.nav-bar a:hover{background:var(--btn-hover);color:var(--white)}
.nav-bar a:active{background:var(--btn-active)}

.main-layout{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start}
.sidebar{display:flex;flex-direction:column;gap:14px}

/* sidebar */
.sidebar-box{padding:14px}
.sidebar-box h3{
  font-family:var(--sans);font-size:13px;font-weight:bold;color:var(--white);letter-spacing:.5px;
  border-bottom:1px solid var(--line-dark);margin-bottom:10px;padding-bottom:8px;text-shadow:var(--engrave);
}
.sidebar-box ul{list-style:none}
.sidebar-box ul li{
  color:var(--text);font-size:12px;padding:5px 0;border-bottom:1px solid var(--line-soft);text-shadow:var(--engrave);
}
.sidebar-box ul li:last-child{border-bottom:none}
.sidebar-box ul li::before{content:"– ";color:var(--dim)}
.sidebar-box ul li a{color:var(--text);text-decoration:none;transition:color .12s ease}
.sidebar-box ul li a:hover{color:var(--white)}
.sidebar-about{font-size:12px;line-height:1.7;color:var(--muted)}
.skill-bar-label{color:var(--muted);font-family:var(--mono);font-size:10px;margin-top:6px}
.skill-bar-track{background:#0d0d0d;border:1px solid var(--edge);box-shadow:var(--bevel-1);height:9px;margin:4px 0 8px;overflow:hidden}
.skill-bar-fill{height:100%;background:linear-gradient(0deg,#444,#666)}

/* gif box -> plain media tile */
.gif-box{padding:12px;text-align:center}
.fake-gif{
  width:100%;height:80px;background:#0d0d0d;border:1px solid var(--edge);box-shadow:var(--bevel-1);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:16px;color:var(--dim);
}
.gif-box p{color:var(--muted);font-family:var(--mono);font-size:10px;margin-top:6px}

/* posts — each card is a little "window" with the rainbow line on top */
.posts-area{display:flex;flex-direction:column;gap:14px}
.post-card{padding:0}
.post-card-header{
  background:var(--panel-2) var(--noise) repeat;
  border-bottom:1px solid var(--edge);
  box-shadow:inset 0 -1px 0 #2e2e2e;
  padding:12px 16px;
  display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.post-card-header h2{
  font-family:var(--sans);font-size:16px;font-weight:bold;color:var(--white);letter-spacing:.3px;text-shadow:var(--engrave);
}
.post-card-header h2 a{color:inherit;text-decoration:none}
.post-card-header h2 a:hover{color:var(--text);text-decoration:underline}
.post-meta{color:var(--muted);font-family:var(--mono);font-size:10px;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.tag{
  background:var(--btn);border:1px solid #323232;color:var(--text);
  font-family:var(--mono);font-size:9px;letter-spacing:.5px;padding:2px 7px;display:inline-block;text-shadow:var(--engrave);
}
.post-card-body{padding:16px}
.post-body-text{font-size:14px;line-height:1.8;word-break:break-word;color:var(--text)}
.posts-area .post-body-text{white-space:pre-wrap}

/* rendered post formatting */
.post-body-text strong{color:var(--white);font-weight:bold}
.post-body-text em{font-style:italic}
.post-body-text u{text-decoration:underline}
.post-body-text del{color:var(--muted)}
.post-body-text a{color:var(--white);text-decoration:underline}
.post-body-text a:hover{color:#fff}
.post-body-text h3{font-family:var(--sans);font-size:19px;font-weight:bold;color:var(--white);margin:22px 0 10px;text-shadow:var(--engrave)}
.post-body-text h4{font-family:var(--sans);font-size:16px;font-weight:bold;color:var(--white);margin:18px 0 8px;text-shadow:var(--engrave)}
.post-body-text h5{font-family:var(--sans);font-size:14px;font-weight:bold;color:var(--text);margin:16px 0 6px}
.post-body-text ul,.post-body-text ol{margin:10px 0 10px 24px}
.post-body-text li{margin:4px 0}
.post-body-text blockquote{
  border-left:3px solid #4a4a4a;background:#0d0d0d;border-top:1px solid var(--edge);
  margin:14px 0;padding:10px 16px;color:var(--muted);
}
.post-body-text hr{border:none;border-top:1px solid var(--line-dark);box-shadow:0 1px 0 #050505;margin:22px 0}
.post-body-text .pf-mono{font-family:var(--mono)}
.post-body-text .pf-code{
  font-family:var(--mono);font-size:.9em;
  background:#0d0d0d;border:1px solid var(--edge);box-shadow:var(--bevel-1);padding:1px 6px;color:var(--white);
}
.post-body-text .pf-pre{
  background:#0d0d0d;border:1px solid var(--edge);box-shadow:var(--bevel-1);
  padding:16px;margin:14px 0;overflow-x:auto;
}
.post-body-text .pf-pre code{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--text);white-space:pre}
.post-body-text .pf-img{
  max-width:100%;height:auto;display:block;margin:14px 0;border:1px solid var(--edge);box-shadow:var(--bevel-1);
}
.post-image{margin:14px 0;border:1px solid var(--edge);box-shadow:var(--bevel-1);background:#0d0d0d;padding:8px;text-align:center}
.post-image img{max-width:100%;max-height:340px;display:block;margin:0 auto 6px}
.post-image figcaption{color:var(--dim);font-family:var(--mono);font-size:10px}

/* read more -> gradient grey button, just like the splash */
.read-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  padding:7px 18px;
  background:var(--btn);
  border:1px solid #323232;
  color:var(--text);
  font-family:var(--sans);
  font-weight:bold;
  font-size:13px;
  letter-spacing:.2px;
  text-decoration:none;
  text-shadow:var(--engrave);
  transition:background .12s ease;
}
.read-more:hover{background:var(--btn-hover);color:var(--white)}
.read-more:active{background:var(--btn-active)}

/* footer */
.footer-bar{margin-top:16px;padding:14px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--dim)}

/* settings table */
.settings-table{width:100%;border-collapse:collapse;font-size:13px}
.settings-table td{padding:10px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.settings-table td:first-child{color:var(--muted);font-family:var(--mono);font-size:12px;width:170px}
.settings-table input{
  width:100%;background:#0d0d0d;border:1px solid var(--edge);box-shadow:var(--bevel-1);
  color:var(--text);font-family:var(--mono);font-size:13px;padding:8px 10px;
}
.settings-table input:focus{outline:none;border-color:var(--muted)}
.setup-box{max-width:500px;margin:48px auto}

/* ── Tablet: stack sidebar below content (don't hide it) ── */
@media(max-width:880px){
  .main-layout{grid-template-columns:1fr}
  .sidebar{flex-direction:row;flex-wrap:wrap}
  .sidebar-box,.gif-box{flex:1 1 240px}
}

/* ── Phone ── */
@media(max-width:600px){
  .blog-root{padding:16px 14px}
  .header-box{padding:20px 14px 14px}
  .header-box h1{font-size:23px;letter-spacing:.3px}
  .tagline{font-size:11px}
  .nav-bar{flex-wrap:wrap}
  .nav-bar a{padding:9px 14px;font-size:13px;flex:1 1 auto;text-align:center}
  .sidebar{flex-direction:column}
  .sidebar-box,.gif-box{flex:1 1 auto}
  .post-card-header{padding:10px 14px}
  .post-card-header h2{font-size:15px}
  .post-card-body{padding:14px}
  .post-body-text{font-size:14px}
  .post-meta{align-items:flex-start}
  .two-col{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:1fr}
  .about-wrap{flex-direction:column;align-items:flex-start;gap:14px;padding:16px}
  .about-pfp,.about-pfp-placeholder{width:84px;height:84px}
  .about-text{font-size:13px}
  .post-body-text h3{font-size:18px}
  .post-body-text .pf-pre{padding:12px}
  .contact-wrap{flex-direction:column;align-items:flex-start;gap:6px}
}

/* about page */
.about-wrap{display:flex;gap:20px;align-items:flex-start;padding:20px}
.about-pfp{flex-shrink:0;width:96px;height:96px;border:1px solid var(--edge);box-shadow:var(--bevel-1);object-fit:cover}
.about-pfp-placeholder{
  flex-shrink:0;width:120px;height:120px;border:1px solid var(--edge);box-shadow:var(--bevel-1);background:#0d0d0d;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--dim);text-align:center;
}
.about-text{flex:1;font-size:14px;line-height:1.8;color:var(--text)}
.about-text h2{font-family:var(--sans);font-size:21px;font-weight:bold;color:var(--white);margin-bottom:12px;text-shadow:var(--engrave)}
.typewriter{white-space:pre-wrap}
.sean{color:var(--white);font-weight:bold}
.blabla{color:var(--white);font-size:14px;font-family:var(--mono);text-decoration:underline}
.blabla:hover{color:#fff}

.about-facts{list-style:none;margin:0 0 16px;padding:0}
.about-facts li{font-size:13px;color:var(--text);padding:6px 0;border-bottom:1px solid var(--line-soft)}
.about-facts li:last-child{border-bottom:none}
.about-facts li span{display:inline-block;width:90px;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.3px}
.about-text p{margin-top:12px}
.about-text p:first-of-type{margin-top:0}

/* contact */
.contact-wrap{padding:20px;display:flex;align-items:center;gap:12px}
.contact-label{color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.3px}
.contact-email{color:var(--white);font-size:15px;font-family:var(--mono);text-decoration:underline}
.contact-email:hover{color:#fff}

/* empty / 404 state */
.empty-state{padding:28px 20px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:13px}

/* tools page */
.tools-section{margin-bottom:8px}
.tools-cat{
  font-family:var(--sans);font-size:13px;font-weight:bold;color:var(--white);letter-spacing:.3px;
  margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--line-dark);text-shadow:var(--engrave);
}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.tool-card{
  display:block;background:var(--panel-2) var(--noise) repeat;border:1px solid var(--edge);box-shadow:var(--bevel-1);
  padding:14px;text-decoration:none;transition:background .12s ease;
}
.tool-card:hover{background:#242427 var(--noise) repeat}
.tool-name{font-family:var(--sans);font-size:14px;font-weight:bold;color:var(--white);margin-bottom:4px;text-shadow:var(--engrave)}
.tool-desc{font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:600px){
  .tools-grid{grid-template-columns:1fr}
}

/* ============================================================
   LUCID theme — teal, Montserrat, rounded, flat.
   Applied site-wide when the admin picks it in m4l33t.
   ============================================================ */
@font-face{font-family:'Montserrat';font-weight:400;font-display:swap;src:url('/assets/fonts/montserrat-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:500;font-display:swap;src:url('/assets/fonts/montserrat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:600;font-display:swap;src:url('/assets/fonts/montserrat-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:700;font-display:swap;src:url('/assets/fonts/montserrat-latin-700-normal.woff2') format('woff2')}

:root[data-theme="lucid"]{
  --bg:#101010;
  --panel:#181818;
  --panel-2:#202020;
  --line:rgba(61,60,60,.66);
  --line-dark:rgba(61,60,60,.66);
  --line-soft:rgba(46,45,45,.66);
  --edge:rgba(61,60,60,.66);
  --text:#cecece;
  --muted:#8f8f8f;
  --dim:#666666;
  --white:#ffffff;
  --accent:#79c2ce;
  --accent-soft:#8fd0db;
  --btn:#272727;
  --btn-hover:#303030;
  --btn-active:#242424;
  --noise:none;
  --bevel:none;
  --bevel-1:none;
  --engrave:none;
  --radius:12px;
  --sans:'Montserrat','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;
}
/* kill the shimmering rainbow line */
:root[data-theme="lucid"] .header-box::before,
:root[data-theme="lucid"] .header-box::after,
:root[data-theme="lucid"] .post-card::before{display:none}
/* flat panels, hairline border (radius flows from --radius) */
:root[data-theme="lucid"] .header-box,
:root[data-theme="lucid"] .nav-bar,
:root[data-theme="lucid"] .sidebar-box,
:root[data-theme="lucid"] .gif-box,
:root[data-theme="lucid"] .post-card,
:root[data-theme="lucid"] .footer-bar,
:root[data-theme="lucid"] .about-wrap,
:root[data-theme="lucid"] .contact-wrap,
:root[data-theme="lucid"] .empty-state,
:root[data-theme="lucid"] .marquee-bar{box-shadow:none;border-color:var(--line)}
/* headings: semibold, no engrave */
:root[data-theme="lucid"] .header-box h1,
:root[data-theme="lucid"] .post-card-header h2,
:root[data-theme="lucid"] .sidebar-box h3,
:root[data-theme="lucid"] .post-body-text h3,
:root[data-theme="lucid"] .post-body-text h4,
:root[data-theme="lucid"] .post-body-text h5,
:root[data-theme="lucid"] .about-text h2,
:root[data-theme="lucid"] .tools-cat,
:root[data-theme="lucid"] .tool-name{font-weight:600;text-shadow:none}
/* buttons: flat dark, rounded */
:root[data-theme="lucid"] .nav-bar a,
:root[data-theme="lucid"] .read-more,
:root[data-theme="lucid"] .counter{
  background:var(--btn);border:1px solid var(--line);box-shadow:none;text-shadow:none;border-radius:8px;
}
:root[data-theme="lucid"] .nav-bar a:hover,
:root[data-theme="lucid"] .read-more:hover{background:var(--btn-hover);color:#fff}
:root[data-theme="lucid"] .tag{
  background:rgba(121,194,206,.12);border:1px solid transparent;color:#79c2ce;
  box-shadow:none;text-shadow:none;border-radius:6px;
}
/* post card header: flat */
:root[data-theme="lucid"] .post-card-header{box-shadow:none;border-bottom:1px solid var(--line);background:var(--panel-2)}
/* skill bars: teal fill, rounded */
:root[data-theme="lucid"] .skill-bar-track{box-shadow:none;border-color:transparent;border-radius:6px;background:#2a2a2a}
:root[data-theme="lucid"] .skill-bar-fill{background:linear-gradient(90deg,#79c2ce,#5fa8b4)}
/* code, images, tiles: flat rounded */
:root[data-theme="lucid"] .post-body-text .pf-code,
:root[data-theme="lucid"] .post-body-text .pf-pre,
:root[data-theme="lucid"] .post-body-text .pf-img,
:root[data-theme="lucid"] .post-image,
:root[data-theme="lucid"] .fake-gif,
:root[data-theme="lucid"] .about-pfp,
:root[data-theme="lucid"] .about-pfp-placeholder,
:root[data-theme="lucid"] .tool-card{box-shadow:none;border-color:var(--line);border-radius:10px}
:root[data-theme="lucid"] .post-body-text blockquote{border-left:3px solid #79c2ce;background:var(--panel-2);border-top:none;border-radius:8px}
:root[data-theme="lucid"] .post-body-text .pf-code{color:#79c2ce}
/* teal link hovers */
:root[data-theme="lucid"] .sidebar-box ul li a:hover,
:root[data-theme="lucid"] .post-card-header h2 a:hover,
:root[data-theme="lucid"] .post-body-text a:hover{color:#79c2ce}
:root[data-theme="lucid"] .counter #visitor-count{color:#79c2ce}