/*
Theme Name: Echo Tach Dispatch
Theme URI: https://echotach.com
Author: Your Name
Author URI: https://echotach.com
Description: An editorial "newsroom dispatch" blog theme with a featured-image hero, pull quotes, drop caps, and a masthead layout. Built for movie, news and long-form blog content.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dispatch
*/

:root{
  --ink:#1B2430;        /* deep slate background */
  --ink-2:#242F3E;      /* slightly lighter panel */
  --paper:#EDEAE3;      /* off-white text/paper */
  --paper-dim:#B9BEC4;  /* muted paper for secondary text */
  --mustard:#D9A441;    /* accent */
  --teal:#4C7A7A;       /* secondary accent */
  --rule:rgba(237,234,227,0.14);
  --maxw: 720px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--mustard);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
.screen-reader-text{position:absolute;left:-9999px;}

/* ===== Masthead ===== */
.masthead{
  max-width:960px;
  margin:0 auto;
  padding:28px 24px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--rule);
  flex-wrap:wrap;
  gap:14px;
}
.masthead .site-branding{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--paper-dim);
  display:flex;
  align-items:center;
  gap:10px;
}
.masthead .site-branding a{color:var(--paper-dim);}
.masthead .site-branding a:hover{color:var(--mustard);text-decoration:none;}
.masthead .site-branding::before{
  content:"";
  width:8px;height:8px;
  background:var(--mustard);
  border-radius:50%;
  display:inline-block;
}
.masthead .timestamp{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--paper-dim);
  letter-spacing:0.04em;
}
.main-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin:0;
  padding:0;
}
.main-nav a{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.main-nav a:hover{color:var(--mustard);text-decoration:none;}

/* ===== Post list (index / archive) ===== */
.post-list{
  max-width:960px;
  margin:0 auto;
  padding:40px 24px 60px;
  display:grid;
  gap:36px;
}
.post-card{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  padding-bottom:36px;
  border-bottom:1px solid var(--rule);
}
.post-card .card-thumb{
  border:1px solid var(--rule);
  overflow:hidden;
  aspect-ratio:4/3;
}
.post-card .card-thumb img{width:100%;height:100%;object-fit:cover;}
.post-card .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--mustard);
  padding:4px 9px;
  display:inline-block;
  margin-bottom:10px;
}
.post-card h2{
  font-family:'Newsreader', serif;
  font-weight:500;
  font-size:24px;
  line-height:1.2;
  margin:0 0 8px;
}
.post-card h2 a{color:var(--paper);}
.post-card h2 a:hover{color:var(--mustard);text-decoration:none;}
.post-card .excerpt{
  font-size:15px;
  color:var(--paper-dim);
  margin:0 0 10px;
}
.post-card .meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--paper-dim);
}
@media (max-width:600px){
  .post-card{grid-template-columns:1fr;}
}

.pagination{
  max-width:960px;
  margin:0 auto;
  padding:0 24px 60px;
  display:flex;
  gap:14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.pagination a, .pagination span{color:var(--paper-dim);}
.pagination .current{color:var(--mustard);}

/* ===== Article header (single.php) ===== */
.article-head{
  max-width:var(--maxw);
  margin:0 auto;
  padding:44px 24px 28px;
}
.eyebrow-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--mustard);
  padding:5px 10px;
}
.eyebrow-sub{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--teal);
}
h1.headline{
  font-family:'Newsreader', serif;
  font-weight:500;
  font-size:clamp(32px, 5vw, 48px);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 16px;
  color:var(--paper);
}
.dek{
  font-family:'Newsreader', serif;
  font-style:italic;
  font-size:19px;
  color:var(--paper-dim);
  margin:0 0 22px;
  max-width:58ch;
}
.byline-row{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--paper-dim);
  padding-top:16px;
  border-top:1px solid var(--rule);
}
.byline-row .author{color:var(--paper);}
.byline-row .dot{opacity:0.4;}

/* ===== Featured image ===== */
.hero{
  max-width:960px;
  margin:0 auto;
  padding:0 24px 8px;
}
.hero-frame{
  position:relative;
  border:1px solid var(--rule);
}
.hero-frame img{width:100%;height:auto;}
.hero-caption{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 2px 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--paper-dim);
  letter-spacing:0.02em;
}
.hero-caption .credit{color:var(--teal);}

.stamp{
  position:absolute;
  top:18px;
  right:18px;
  border:1.5px solid var(--mustard);
  color:var(--mustard);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:7px 12px;
  transform:rotate(4deg);
  background:rgba(27,36,48,0.55);
  backdrop-filter:blur(2px);
}

/* ===== Body / entry content ===== */
.article-body, .entry-content{
  max-width:var(--maxw);
  margin:0 auto;
  padding:38px 24px 20px;
  font-size:18px;
  color:var(--paper);
}
.article-body p, .entry-content p{margin:0 0 22px;}
.drop p:first-of-type::first-letter{
  font-family:'Newsreader', serif;
  font-size:64px;
  line-height:0.8;
  float:left;
  padding:8px 10px 0 0;
  color:var(--mustard);
  font-weight:500;
}
.entry-content img{border:1px solid var(--rule);margin:8px 0;}
.entry-content figcaption{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--paper-dim);
  margin-top:8px;
}
.entry-content blockquote{
  font-family:'Newsreader', serif;
  font-style:italic;
  font-size:26px;
  line-height:1.4;
  color:var(--paper);
  border-left:2px solid var(--mustard);
  padding:2px 0 2px 24px;
  margin:38px 0;
}
.entry-content a{text-decoration:underline;}

/* ===== Tags & author box ===== */
.tags{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px 24px 40px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--paper-dim);
  border:1px solid var(--rule);
  padding:6px 11px;
}
.tag:hover{border-color:var(--mustard);color:var(--mustard);text-decoration:none;}

.author-box{
  max-width:var(--maxw);
  margin:0 auto 60px;
  padding:22px 24px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.author-box .avatar{
  width:44px;height:44px;
  flex:none;
  background:var(--teal);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  overflow:hidden;
  border-radius:50%;
}
.author-box .avatar img{width:100%;height:100%;object-fit:cover;}
.author-box .name{
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  color:var(--paper);
  font-size:14px;
  margin-bottom:4px;
}
.author-box .bio{
  font-size:13.5px;
  color:var(--paper-dim);
  margin:0;
}

/* ===== Comments ===== */
.comments-area{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px 60px;
}
.comments-title{
  font-family:'Newsreader', serif;
  font-size:22px;
  font-weight:500;
  margin-bottom:20px;
}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list li{
  border-top:1px solid var(--rule);
  padding:18px 0;
}
.comment-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--paper-dim);
  margin-bottom:6px;
}
.comment-meta .comment-author{color:var(--paper);}
.comment-content p{font-size:15px;margin:0;}
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond textarea{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--rule);
  color:var(--paper);
  padding:10px 12px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14px;
  margin-bottom:12px;
}
.comment-respond .submit{
  background:var(--mustard);
  color:var(--ink);
  border:none;
  padding:10px 18px;
  font-family:'IBM Plex Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:12px;
  cursor:pointer;
}

/* ===== Footer ===== */
.site-footer{
  max-width:960px;
  margin:0 auto;
  padding:24px;
  border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--paper-dim);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

/* ===== Widgets / sidebar (optional use) ===== */
.widget-area{
  max-width:960px;
  margin:0 auto;
  padding:0 24px 40px;
}
.widget{margin-bottom:28px;}
.widget-title{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--mustard);
  margin-bottom:12px;
}

@media (max-width:600px){
  .article-body, .entry-content{font-size:16.5px;}
  .entry-content blockquote{font-size:21px;}
  .stamp{top:12px;right:12px;padding:5px 9px;font-size:10px;}
}