/*
Theme Name: Trazi
Theme URI: https://trazi.online
Author: Trazi
Description: Standalone theme for trazi.online — personal audits, ranked and counted. A literary, editorial single-stream blog layout built for an AdSense-friendly, mobile-friendly homepage.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: trazi
*/

:root{
  --ink:#201C18;
  --ink-soft:#2C2620;
  --paper:#F7F3EA;
  --card:#FFFFFF;
  --border:#E7DFCF;
  --border-soft:#F0EADD;
  --text-1:#241F1A;
  --text-2:#635A4E;
  --text-3:#94897A;
  --signal:#B1502F;
  --signal-dark:#8A3D22;
  --radius:10px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--paper);
  color:var(--text-1);
  font-family:'Newsreader',Georgia,serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.ui{font-family:'Inter',system-ui,sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:820px; margin:0 auto; padding:0 24px;}
.wrap-wide{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ---------- utility bar ---------- */
.utility{background:var(--ink); color:#C9BFAE; font-size:12px; font-family:'Inter';}
.utility .wrap-wide{display:flex; justify-content:space-between; align-items:center; height:32px;}
.utility a{color:#C9BFAE; opacity:0.9;}
.utility a:hover{color:#fff;}
.utility-links{display:flex; gap:16px;}

/* ---------- header ---------- */
header{background:var(--paper); border-bottom:1px solid var(--border); position:relative;}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px;}
.logo{display:flex; align-items:center; gap:10px; color:var(--ink); flex-shrink:0; max-width:200px;}
.logo .custom-logo-link{display:block;}
.logo img{max-height:44px !important; width:auto !important; height:auto !important; display:block;}
.logo-word{font-family:'Newsreader'; font-weight:600; font-style:italic; font-size:26px; letter-spacing:-0.01em;}
.logo-word span{color:var(--signal);}
nav.primary{display:flex; gap:4px; flex:1; justify-content:flex-end; font-family:'Inter';}
nav.primary a{
  color:var(--text-2); font-size:13.5px; font-weight:600; padding:10px 12px;
  border-radius:7px; white-space:nowrap; transition:background .15s, color .15s;
}
nav.primary a:hover{background:var(--border-soft); color:var(--signal-dark);}

/* ---------- mobile hamburger ---------- */
.menu-toggle{
  display:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--border);
  background:var(--card); align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:''; display:block; width:17px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:.2s;
}
.menu-toggle span::before{position:absolute; top:-6px;}
.menu-toggle span::after{position:absolute; top:6px;}
.menu-toggle.is-open span{background:transparent;}
.menu-toggle.is-open span::before{top:0; transform:rotate(45deg);}
.menu-toggle.is-open span::after{top:0; transform:rotate(-45deg);}

/* ---------- ad slots ---------- */
.ad-slot{display:flex; flex-direction:column; align-items:center; gap:6px; margin:32px 0; font-family:'Inter';}
.ad-label{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3);}
.ad-box{
  width:100%; border:1.5px dashed #DCD2BC; border-radius:8px; background:#F0E9D8;
  display:flex; align-items:center; justify-content:center; color:#A79C87;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; text-align:center;
}
.ad-728{max-width:728px; height:90px;}
.ad-native{height:110px;}
.ad-300x250{width:300px; height:250px;}
.ad-300x600{width:300px; height:600px;}
.ad-inline{max-width:728px; height:100px;}

/* ---------- intro / masthead ---------- */
.masthead{padding:46px 0 8px; text-align:center;}
.masthead-eyebrow{font-family:'Inter'; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--signal-dark); font-weight:700; margin-bottom:12px;}
.masthead h1{font-size:38px; font-style:italic; font-weight:600; margin-bottom:14px;}
.masthead p{font-size:16.5px; color:var(--text-2); max-width:520px; margin:0 auto; line-height:1.65;}

/* ---------- essay feed ---------- */
.layout{display:grid; grid-template-columns:1fr 300px; gap:44px; align-items:start; max-width:1080px; margin:20px auto 8px; padding:0 24px;}
.sidebar{position:sticky; top:20px; display:flex; flex-direction:column; gap:24px; font-family:'Inter';}

.essay-feed{display:flex; flex-direction:column;}
.essay{padding:34px 0; border-bottom:1px solid var(--border);}
.essay:first-child{padding-top:0;}
.essay-meta{font-family:'Inter'; font-size:12px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; display:flex; gap:8px; align-items:center;}
.essay-meta .tag{color:var(--signal-dark); font-weight:700;}
.essay h2{font-size:27px; line-height:1.3; margin-bottom:10px; font-weight:600;}
.essay h2 a:hover{color:var(--signal-dark);}
.essay-excerpt{color:var(--text-2); font-size:16px; line-height:1.7;}
.essay-continue{font-family:'Inter'; font-size:13px; font-weight:700; color:var(--signal-dark); margin-top:12px; display:inline-block;}
.essay-continue:hover{text-decoration:underline;}

/* ---------- sidebar widgets ---------- */
.widget{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px;}
.widget h3{font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:14px; color:var(--text-1); font-weight:700;}
.about-widget p{font-family:'Newsreader'; font-size:15px; color:var(--text-2); line-height:1.65; font-style:italic;}
.popular-item{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft);}
.popular-item:last-child{border-bottom:none; padding-bottom:0;}
.popular-item:first-child{padding-top:0;}
.popular-rank{font-family:'Newsreader'; font-style:italic; font-weight:600; color:var(--text-3); font-size:15px;}
.popular-title{font-family:'Newsreader'; font-size:14.5px; font-weight:600; line-height:1.4;}
.popular-title:hover{color:var(--signal-dark);}

.newsletter{background:var(--ink); color:#fff; border:none;}
.newsletter h3{color:#fff;}
.newsletter p{font-size:13px; color:#C9BFAE; margin-bottom:13px; font-family:'Inter';}
.newsletter input{width:100%; height:38px; border-radius:7px; border:1px solid #3C342A; background:var(--ink-soft); color:#fff; padding:0 12px; font-size:13px; margin-bottom:10px; font-family:'Inter';}
.newsletter input::placeholder{color:#8A8071;}
.newsletter button{width:100%; height:38px; border-radius:7px; border:none; background:var(--signal); color:#fff; font-weight:700; font-size:13px; cursor:pointer; font-family:'Inter';}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#C9BFAE; margin-top:50px; font-family:'Inter';}
.footer-top{padding:44px 0 28px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; border-bottom:1px solid #3C342A; max-width:1080px; margin:0 auto; padding-left:24px; padding-right:24px;}
.footer-top .logo-word{color:#fff;}
.footer-top .logo img{max-height:38px !important; width:auto !important; height:auto !important;}
.footer-top p{font-size:13.5px; color:#9C9285; max-width:420px; font-family:'Newsreader'; font-style:italic;}
.footer-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;}
.footer-links a{font-size:13px; color:#C9BFAE;}
.footer-links a:hover{color:#fff;}
.footer-bottom{padding:18px 0; font-size:12px; color:#83786A; text-align:center;}

/* ---------- single post / page ---------- */
.site-main{max-width:720px; margin:0 auto; padding:44px 24px 60px;}
.single-title{font-size:38px; line-height:1.25; margin-bottom:16px; font-style:italic; font-weight:600;}
.single-meta{font-family:'Inter'; font-size:12.5px; color:var(--text-3); margin-bottom:30px; text-transform:uppercase; letter-spacing:0.04em;}
.single-thumb{border-radius:var(--radius); overflow:hidden; margin-bottom:28px;}
.entry-content{font-size:18px; line-height:1.8; color:var(--text-1);}
.entry-content p{margin-bottom:22px;}
.entry-content h2{font-size:24px; margin:34px 0 14px; font-style:italic;}
.entry-content h3{font-size:20px; margin:28px 0 12px;}
.entry-content img{border-radius:8px; margin:18px 0;}
.entry-content a{color:var(--signal-dark); text-decoration:underline;}
.entry-content ul, .entry-content ol{margin:0 0 22px 24px;}
.archive-header{max-width:1080px; margin:0 auto; padding:44px 24px 20px; text-align:center;}
.archive-title{font-size:32px; font-style:italic; font-weight:600;}
.pagination-nav{display:flex; justify-content:space-between; margin-top:20px; padding-top:20px; border-top:1px solid var(--border); font-size:14px; font-family:'Inter';}
.pagination-nav a{font-weight:700; color:var(--signal-dark);}
.no-results{padding:40px 24px; color:var(--text-2); text-align:center; font-family:'Inter';}

@media (max-width: 860px){
  .layout{grid-template-columns:1fr;}
  .sidebar{position:static;}
  .header-inner{height:62px;}
  .menu-toggle{display:flex;}
  nav.primary{
    display:none; position:absolute; top:62px; left:0; right:0; z-index:40;
    background:var(--paper); border-bottom:1px solid var(--border); flex-direction:column;
    padding:8px 20px 16px; gap:2px; box-shadow:0 12px 24px rgba(32,28,24,0.08);
  }
  nav.primary.is-open{display:flex;}
  nav.primary a{padding:12px 8px; border-bottom:1px solid var(--border-soft); border-radius:0; text-align:left;}
  .masthead h1{font-size:30px;}
  .essay h2{font-size:23px;}
}