:root{--bg:#030806;--text:#f5f4ec;--muted:#a6b0a9;--lime:#C49ABF;--line:rgba(201,225,168,.18);--glass:rgba(3,10,7,.72)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-color: #030806;
  background-image:
    linear-gradient(
      180deg,
      rgba(0, 5, 3, .44),
      rgba(0, 5, 3, .24) 38%,
      #030806 91%
    ),
    url("assets/enchanted-background.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: scale(1.02);
}


.site-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-color: #030806;
  background-image:
    linear-gradient(
      180deg,
      rgba(0,5,3,.44),
      rgba(0,5,3,.24) 38%,
      #030806 91%
    ),
    url("assets/enchanted-background.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

.site-bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0,0,0,.2) 72%,
    rgba(0,0,0,.48) 100%
  );
}

@media (max-width: 600px) {
  .site-bg {
    background-image:
      linear-gradient(
        180deg,
        rgba(0,5,3,.25),
        rgba(0,5,3,.15) 45%,
        #030806 100%
      ),
      url("assets/enchanted-background-mobile.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    transform: none;
  }
}


header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,78px);position:absolute;top:0;left:0;right:0;z-index:5;border-bottom:1px solid rgba(255,255,255,.025)}
.brand{display:flex;align-items:center;gap:12px;font:24px Georgia,"Times New Roman",serif;letter-spacing:-.6px;white-space:nowrap}
.brand svg{width:34px;height:34px;filter:drop-shadow(0 0 9px #d5e8a477)}
nav{display:flex;gap:36px;font-size:14px;color:#c0c9c2}nav a{padding:12px 0;position:relative;transition:color .2s}nav a:hover,nav a.active{color:#fff}nav a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--lime)}
.header-note{font-size:11px;letter-spacing:2px;color:#b7c1b7;text-transform:uppercase}
.hero{min-height:680px;height:91vh;max-height:900px;position:relative;display:grid;place-items:center;text-align:center;padding:110px 22px 80px}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.44),transparent 56%);pointer-events:none}
.hero-content{position:relative;max-width:900px;animation:rise 1s ease both}
.eyebrow{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:#e0e7d9;margin-bottom:22px}
h1{font:clamp(54px,7.5vw,104px)/.98 Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-4px;margin:0;text-shadow:0 4px 32px #000}
h1 em{color:var(--lime);font-weight:400}
.tagline{font-size:clamp(13px,1.5vw,18px);letter-spacing:1.7px;line-height:1.8;color:#e1e5de;margin:24px 0 0;text-shadow:0 2px 12px #000}
.rule{width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent);margin:29px auto}
.description{font:16px/1.8 Georgia,serif;color:#bdc7bc;max-width:550px;margin:0 auto;text-shadow:0 2px 12px #000}
.pills{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:29px}
.pill{border:1px solid rgba(216,230,199,.2);border-radius:99px;padding:9px 17px;background:rgba(2,9,6,.58);backdrop-filter:blur(8px);font-size:11px;color:#e0e5db;transition:.25s}
.pill:hover,.pill.active{border-color:var(--lime);box-shadow:0 0 18px #c8e45d2b;color:white;transform:translateY(-1px)}
.scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:3px;color:#b4beb2}
.scroll:after{content:"";display:block;height:28px;width:1px;background:linear-gradient(var(--lime),transparent);margin:12px auto 0}
.articles{max-width:1320px;margin:0 auto;padding:0 clamp(22px,5vw,78px) 90px;position:relative}
.section-head{display:flex;align-items:center;gap:15px;margin-bottom:24px}
.section-head h2{font-size:10px;letter-spacing:4px;font-weight:500;margin:0;white-space:nowrap}
.section-rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);flex:1}
.view-all{font-size:12px;color:var(--lime);white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{border:1px solid rgba(191,219,193,.16);border-radius:12px;overflow:hidden;background:linear-gradient(145deg,rgba(6,17,12,.94),rgba(2,7,5,.96));backdrop-filter:blur(10px);transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);border-color:#c8e45d77;box-shadow:0 18px 42px #0008}
#post-list .card{cursor:pointer}
#post-list .card:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
#post-list .card:focus-visible{border-color:#c8e45d}
.thumb{height:145px;position:relative;overflow:hidden;background:radial-gradient(circle at 70% 20%,#294b37,#07100b 65%)}
.thumb:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,#0008),radial-gradient(circle at 20% 80%,#b7d34b22,transparent 35%)}
.thumb .symbol{position:absolute;inset:0;display:grid;place-items:center;font-size:45px;filter:drop-shadow(0 0 20px #c8e45d33)}
.thumb.tech{background:linear-gradient(135deg,#132d2c,#030908 70%)}
.thumb.philosophy{background:linear-gradient(135deg,#35453e,#121a17 50%,#050907)}
.thumb.science{background:radial-gradient(ellipse at 52% 45%,#e1cda2 0,#517c89 12%,#12374a 32%,#020810 72%)}
.thumb.gaming{background:linear-gradient(135deg,#071c27,#240c18)}
.card-body{padding:17px 18px 19px}
.category{font-size:9px;letter-spacing:2px;color:var(--lime);text-transform:uppercase}
.card h3{font:19px/1.25 Georgia,serif;font-weight:400;margin:11px 0 9px}
.card p{font-size:12px;line-height:1.65;color:#a5b0a8;margin:0;min-height:40px}
.meta{font-size:10px;color:#849189;margin-top:20px;display:flex;gap:9px;align-items:center}
.about{max-width:800px;margin:0 auto;padding:20px 24px 100px;text-align:center}
.about .eyebrow{color:var(--lime)}
.about h2{font:clamp(30px,4vw,46px) Georgia,serif;font-weight:400;margin:10px 0 16px}
.about p{color:#aab5ac;font-size:14px;line-height:1.9}
footer{border-top:1px solid rgba(200,228,93,.13);padding:27px clamp(22px,5vw,78px);display:flex;justify-content:space-between;gap:20px;color:#7f8b82;font-size:11px;background:#030806}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:950px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{height:80vh;min-height:640px}.header-note{display:none}}
@media(max-width:600px){header{height:68px;padding:0 18px}.brand{font-size:19px;gap:8px}.brand svg{width:29px;height:29px}nav{gap:15px;font-size:12px}.hero{min-height:650px;height:auto;padding:140px 18px 100px;background-position:center top}h1{font-size:clamp(48px,12vw,70px);letter-spacing:-2.5px}.tagline{letter-spacing:.7px}.description{font-size:14px}.pill{padding:8px 12px}.articles{padding-left:16px;padding-right:16px;padding-bottom:65px}.grid{gap:11px}.thumb{height:105px}.card-body{padding:13px}.card h3{font-size:16px}.card p{font-size:11px;min-height:56px}.meta{font-size:9px;flex-wrap:wrap;gap:5px;margin-top:15px}.section-head h2{letter-spacing:2px}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

#post-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#post-list .card[hidden]{display:none!important}
#post-list .card h3 a:hover{color:var(--lime)}
#categories{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:0 0 28px}
#categories button{border:1px solid rgba(216,230,199,.2);border-radius:99px;padding:9px 17px;background:rgba(2,9,6,.58);backdrop-filter:blur(8px);font-size:11px;color:#e0e5db;cursor:pointer;transition:.25s}
#categories button:hover,#categories button.active{border-color:var(--lime);box-shadow:0 0 18px #c8e45d2b;color:white}
#empty-message,.status-message{color:#aab5ac;padding:24px 0}
.post-thumb{height:145px;position:relative;display:grid;place-items:center;font-size:42px;background:radial-gradient(circle at 70% 20%,#294b37,#07100b 65%)}
.post-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,#0008),radial-gradient(circle at 20% 80%,#b7d34b22,transparent 35%)}
.post-thumb .symbol{position:relative;z-index:1;filter:drop-shadow(0 0 20px #c8e45d33)}
#about{scroll-margin-top:35px}
body.article-page{min-height:100vh}
.article-wrap{max-width:900px;margin:0 auto;padding:125px 24px 80px;position:relative}
.article-panel{padding:clamp(24px,5vw,58px);border:1px solid rgba(191,219,193,.16);border-radius:16px;background:rgba(3,10,7,.84);backdrop-filter:blur(14px)}
.article-panel h1{font-size:clamp(36px,6vw,66px);letter-spacing:-2px;line-height:1.1}
.article-panel .post-meta{color:#a6b0a9;font-size:12px}
.markdown-body{overflow-wrap:anywhere;color:#d5ddd5;font-size:16px;line-height:1.9}
.markdown-body h2,.markdown-body h3{font-family:Georgia,serif;font-weight:400;margin-top:34px}
.markdown-body img{display:block;max-width:100%;height:auto;border-radius:8px}
.markdown-body pre{overflow:auto;padding:16px;background:#020705;border:1px solid var(--line);border-radius:8px}
.markdown-body blockquote{margin-left:0;padding-left:18px;border-left:2px solid var(--lime);color:#aab5ac}
.markdown-body :not(pre)>code{background:#142019;padding:2px 5px;border-radius:4px}
.back-link{display:inline-block;margin-bottom:20px;color:var(--lime);font-size:13px}
@media(max-width:950px){#post-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#post-list{grid-template-columns:1fr}.post-thumb{height:125px}#categories button{padding:8px 12px}.article-wrap{padding:100px 15px 50px}.article-panel{padding:23px}}
.post-thumb.has-image {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.post-thumb.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transition: transform 0.5s ease;
}

.card:hover .post-thumb.has-image img {
  transform: scale(1.04);
}

.post-thumb.has-image::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(3, 10, 6, 0.45)
  );
  pointer-events: none;
}