/* gloam.sh — custom site styles (blog, projects, posts, 404). Matches the landing. */
@import url('/fonts/fonts.css');

:root{ --void:#000; --green:#2bffa6; --pink:#ff36c6; --text:#ededf0; --dim:#9b9ba3; --card:#0b0b0d; --border:#1e1e24; }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--void); color:var(--text);
  font-family:"Shantell Sans","Comic Sans MS",Tahoma,Verdana,sans-serif; line-height:1.6; }
a{ color:var(--green); text-decoration:none; }
a:hover{ color:var(--pink); }

.site-head{ display:flex; justify-content:space-between; align-items:center; max-width:760px; margin:0 auto; padding:22px; }
.site-head .brand{ font-family:"Permanent Marker",cursive; font-size:24px; color:var(--text); }
.site-head .brand:hover{ color:var(--pink); }
.site-head .brand b{ color:var(--green); }
.site-head nav{ display:flex; gap:18px; font-family:"Permanent Marker",cursive; font-size:15px; }
.site-head nav a{ color:var(--text); border-bottom:3px solid transparent; padding-bottom:2px; }
.site-head nav a:hover{ color:var(--green); border-color:var(--green); }

.wrap{ max-width:760px; margin:0 auto; padding:14px 22px 60px; }
.page-title, .post-title{ font-family:"Permanent Marker",cursive; font-size:36px; margin:.2em 0 .3em; color:var(--text); }
.page-intro{ color:var(--dim); margin-bottom:28px; }

.post-list{ list-style:none; padding:0; margin:0; }
.post-item{ border:1px solid var(--border); border-radius:14px; padding:16px 20px; margin-bottom:14px; transition:border-color .2s, transform .2s; }
.post-item:hover{ border-color:var(--green); transform:translateY(-2px); }
.post-item > a{ font-family:"Permanent Marker",cursive; font-size:20px; }
.post-item time{ display:block; color:var(--dim); font-size:12px; margin-top:2px; }
.post-item p{ color:var(--text); margin:8px 0 0; }
.post-item.empty{ border-style:dashed; color:var(--dim); font-style:italic; }

.post-meta{ color:var(--dim); font-size:13px; margin-bottom:26px; }
.post-meta .tag{ display:inline-block; border:1px solid var(--green); color:var(--green); border-radius:20px; padding:1px 9px; font-size:11px; margin-right:5px; }
.post-content{ font-size:17px; }
.post-content h2,.post-content h3{ font-family:"Permanent Marker",cursive; color:var(--text); margin-top:1.6em; }
.post-content a{ box-shadow:0 1px 0 var(--green); }
.post-content a:hover{ box-shadow:0 2px 0 var(--pink); }
.post-content pre{ background:#0c0c0e; border:1px solid var(--border); border-radius:10px; padding:14px; overflow:auto; }
.post-content code{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:14px; }
.post-content :not(pre) > code{ background:#15151a; padding:1px 6px; border-radius:6px; color:var(--green); }
.post-content img{ max-width:100%; border-radius:10px; }
.post-content blockquote{ border-left:3px solid var(--pink); margin:1em 0; padding-left:14px; color:var(--dim); }

.site-foot{ max-width:760px; margin:0 auto; padding:24px 22px; display:flex; justify-content:space-between; color:var(--dim); font-family:"Permanent Marker",cursive; font-size:12px; border-top:1px solid var(--border); }

.fourohfour{ text-align:center; padding:70px 0; }
.fourohfour h1{ font-family:"Permanent Marker",cursive; font-size:92px; margin:0; color:var(--green); text-shadow:0 0 32px rgba(43,255,166,.4); }
.fourohfour p{ font-size:18px; margin:6px 0; }
.fourohfour .sub{ color:var(--pink); font-style:italic; }
.fourohfour a{ font-family:"Permanent Marker",cursive; display:inline-block; margin-top:20px; }

::selection{ background:var(--pink); color:#000; }