/* Pixelwunder Journal — Frontend Styles */

.pwj-wrap{
  --ink: var(--pwj-ink, #0d0d0f);
  --panel: var(--pwj-panel, #151417);
  --line: #2a272c;
  --gold: var(--pwj-gold, #F0B637);
  --gold-dim: #8a6a22;
  --text: var(--pwj-text, #eae6df);
  --text-dim: var(--pwj-textdim, #9c968d);

  background:var(--ink);
  color:var(--text);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:56px 24px 100px;
}
.pwj-wrap + .pwj-wrap{padding-top:0;}
.pwj-inner{max-width:1080px;margin:0 auto;}
.pwj-wrap *{box-sizing:border-box;}

.pwj-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.pwj-eyebrow .bar{width:28px;height:2px;background:var(--gold);}
.pwj-eyebrow span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}

.pwj-title{
  font-family:Georgia,'Times New Roman',serif;
  font-size:44px;line-height:1.1;margin:0 0 8px;color:var(--text);max-width:640px;
}
.pwj-sub{color:var(--text-dim);font-size:15px;max-width:520px;margin-bottom:56px;}

/* Featured */
.pwj-featured{
  display:grid;grid-template-columns:1.15fr 1fr;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  overflow:hidden;margin-bottom:64px;
}
.pwj-featured-img{
  background-size:cover;background-position:center;
  background-color:#1a181c;min-height:340px;position:relative;
}
.pwj-featured-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg, rgba(240,182,55,.16), rgba(0,0,0,.55));
}
.pwj-tag{
  position:absolute;top:20px;left:20px;z-index:2;
  background:var(--gold);color:#181410;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:2px;
}
.pwj-featured-body{padding:40px 40px 36px;display:flex;flex-direction:column;justify-content:center;}
.pwj-meta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:12px;color:var(--text-dim);margin-bottom:16px;}
.pwj-meta-row .dot{width:3px;height:3px;background:var(--gold-dim);border-radius:50%;}
.pwj-featured-body h2{font-family:Georgia,'Times New Roman',serif;font-size:29px;line-height:1.22;margin:0 0 14px;color:var(--text);}
.pwj-featured-body h2 a{color:inherit;text-decoration:none;}
.pwj-featured-body p{color:var(--text-dim);font-size:15px;line-height:1.65;margin:0 0 22px;}

.pwj-readmore{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:13px;font-weight:600;text-decoration:none;}
.pwj-readmore .arrow{transition:transform .2s;}
.pwj-readmore:hover .arrow{transform:translateX(4px);}

/* Grid */
.pwj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.pwj-card{background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;}
.pwj-card-img{height:170px;background-size:cover;background-position:center;background-color:#19171b;position:relative;}
.pwj-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg, rgba(240,182,55,.12), rgba(0,0,0,.6));}
.pwj-card-cat{
  position:absolute;bottom:14px;left:16px;z-index:2;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-dim);padding:4px 9px;border-radius:2px;background:rgba(13,13,15,.65);
}
.pwj-card-body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column;}
.pwj-card-body .pwj-date{font-size:11px;color:var(--text-dim);letter-spacing:.05em;margin-bottom:10px;}
.pwj-card-body h3{font-family:Georgia,'Times New Roman',serif;font-size:19px;line-height:1.32;margin:0 0 10px;color:var(--text);}
.pwj-card-body h3 a{color:inherit;text-decoration:none;}
.pwj-card-body p{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:0 0 18px;flex:1;}
.pwj-card-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;}
.pwj-card-foot .pwj-readmore{font-size:12px;}
.pwj-card-foot .pwj-time{color:var(--text-dim);}

/* Footer note + pagination */
.pwj-footer-note{
  margin-top:72px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;color:var(--text-dim);font-size:12px;flex-wrap:wrap;gap:12px;
}
.pwj-footer-note b{color:var(--gold);}
.pwj-pagination{display:flex;gap:10px;}
.pwj-pagination a, .pwj-pagination span{
  color:var(--text-dim);text-decoration:none;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:2px;
}
.pwj-pagination a:hover{color:var(--gold);border-color:var(--gold-dim);}
.pwj-pagination .current{color:#181410;background:var(--gold);border-color:var(--gold);}

/* Single post */
.pwj-single{max-width:760px;margin:0 auto;}
.pwj-single-hero{
  height:380px;border-radius:2px;background-size:cover;background-position:center;background-color:#1a181c;
  margin-bottom:32px;position:relative;
}
.pwj-single-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg, rgba(240,182,55,.14), rgba(0,0,0,.5));}
.pwj-single h1{font-family:Georgia,'Times New Roman',serif;font-size:38px;line-height:1.18;margin:0 0 18px;}
.pwj-single .pwj-meta-row{margin-bottom:36px;}
.pwj-single .pwj-content{font-size:16px;line-height:1.8;color:var(--text-dim);}
.pwj-single .pwj-content p{margin:0 0 22px;}
.pwj-single .pwj-content h2{font-family:Georgia,serif;color:var(--text);font-size:24px;margin:40px 0 16px;}
.pwj-back{
  display:inline-flex;align-items:center;gap:8px;color:var(--text-dim);text-decoration:none;
  font-size:13px;margin-bottom:40px;
}
.pwj-back:hover{color:var(--gold);}

@media(max-width:820px){
  .pwj-featured{grid-template-columns:1fr;}
  .pwj-grid{grid-template-columns:1fr;}
  .pwj-title, .pwj-single h1{font-size:30px;}
}