/*
 Theme Name:   Humorist Media
 Theme URI:    https://humoristmedia.com
 Description:  Custom standalone theme for Humorist Media. Full design
               system: header, footer, pages, single posts, and the blog
               archive all use this look. Also includes two special page
               templates -- "Humorist Media (Full Custom Landing)" and
               "Humorist Media (Block Editor Homepage)" -- for the site's
               main landing page.
 Author:       Humorist Media
 Version:      1.0.0
 Requires at least: 5.9
 Requires PHP: 7.4
 Text Domain:  humorist-media
*/

  :root{
    --bg:#0c0c0b;
    --panel:#161613;
    --paper:#f4f1e8;
    --muted:#928d80;
    --accent:#ff4d2e;
    --acid:#d7ff3e;
    --line: rgba(244,241,232,0.14);
    --max: 1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--paper);
    font-family:'Inter', -apple-system, sans-serif;
    font-size:16.5px;
    line-height:1.6;
  }
  img{max-width:100%; height:auto; display:block;}
  a{color:inherit;}
  h1,h2,h3,h4{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800;
    line-height:0.94;
    margin:0;
    letter-spacing:0.01em;
    text-transform:uppercase;
  }
  h1{ font-family:'Bungee', sans-serif; font-weight:400; letter-spacing:0; }
  .wrap{max-width:var(--max); margin:0 auto; padding:0 40px;}
  .rule{ height:1px; background:var(--line); }
  .rule.pop{ height:4px; background:var(--accent); border:none; }

  /* signature: stickers/tags */
  .chip{
    display:inline-block; background:var(--accent); color:#0c0c0b;
    font-family:'Permanent Marker', cursive; font-weight:400; font-size:13.5px;
    letter-spacing:0.01em; text-transform:none;
    padding:6px 13px; transform:rotate(-2deg);
  }
  .chip.acid{ background:var(--acid); transform:rotate(2deg); }
  .chip.outline{ background:transparent; color:var(--paper); border:1.5px solid var(--paper); transform:rotate(-1deg); }

  /* duotone image treatment */
  .duo{ position:relative; overflow:hidden; background:var(--panel); }
  .duo img{ filter:grayscale(1) contrast(1.15) brightness(0.95); width:100%; height:100%; object-fit:cover; }
  .duo::after{ content:""; position:absolute; inset:0; background:var(--accent); mix-blend-mode:color; opacity:0.62; }
  .duo.acid::after{ background:var(--acid); opacity:0.5; }

  /* ===== UTILITY BAR ===== */
  .banner{
    background:var(--accent); color:#0c0c0b;
    font-family:'Inter', sans-serif; font-weight:700;
    font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
    padding:8px 0; text-align:center;
  }
  .banner span{ margin:0 6px; }
  .banner span.sep{ margin:0 14px; opacity:0.55; }

  header.masthead{ padding:50px 0 20px; text-align:center; }
  .masthead h1{
    font-size:clamp(46px, 9vw, 108px);
    color:var(--paper);
  }
  .masthead h1 span{ color:var(--accent); }
  .masthead .est{
    font-size:15.5px; color:var(--muted);
    max-width:520px; margin:20px auto 0; line-height:1.55;
  }

  nav.primary{ padding:16px 0; background:var(--panel); }
  nav.primary .wrap{ display:flex; gap:0; flex-wrap:wrap; justify-content:center; gap:30px;}
  nav.primary a{
    text-decoration:none; color:var(--muted); font-weight:600; font-size:12.5px;
    letter-spacing:0.08em; text-transform:uppercase; border-bottom:2px solid transparent; padding-bottom:3px;
    transition:color .15s, border-color .15s;
  }
  nav.primary a:hover{ color:var(--paper); border-color:var(--accent); }

  /* ===== HERO / FRONT PAGE ===== */
  .front{ display:grid; grid-template-columns: 1.15fr 1fr; gap:60px; padding:60px 0 64px; align-items:center; }
  .front-main h2{
    font-size:clamp(38px,5vw,64px); color:var(--paper); margin:18px 0 22px;
  }
  .front-main p.dek{ font-size:18px; color:var(--muted); max-width:50ch; margin-bottom:24px; }
  .byline{font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:0.06em; text-transform:uppercase;}
  .front-side .duo{ aspect-ratio:4/5; }
  .front-side figcaption{ font-size:13px; color:var(--muted); margin-top:14px; }

  /* ===== DIVISIONS ===== */
  .divisions{ display:grid; grid-template-columns:repeat(5,1fr); background:var(--panel); }
  .division{ padding:34px 24px; border-left:1px solid var(--line); }
  .division:first-child{ border-left:none; }
  .division .chip{ margin-bottom:16px; }
  .division h3{ font-size:23px; margin-bottom:12px; color:var(--paper); }
  .division p{ font-size:13.5px; color:var(--muted); margin:0 0 16px; line-height:1.55; }
  .division a.go{
    font-weight:700; font-size:12px; letter-spacing:0.04em; text-decoration:none; color:var(--accent);
    border-bottom:1.5px solid var(--accent); padding-bottom:2px;
  }

  /* ===== SECTION HEADERS ===== */
  .section{ padding:68px 0; }
  .section-head{ text-align:center; margin-bottom:48px; }
  .section-head h2{ font-size:clamp(34px,4.4vw,52px); color:var(--paper); }
  .section-head .sub{ display:block; color:var(--muted); font-size:14.5px; margin-top:14px; }
  .section-head .sub a{ color:var(--acid); text-decoration:none; }

  /* ===== MAGAZINE SECTION ===== */
  .mag-layout{ display:grid; grid-template-columns: 0.8fr 1.6fr; gap:56px; align-items:center; margin-bottom:44px; }
  .mag-cover{ background:var(--panel); border:1px solid var(--line); padding:40px 26px; }
  .mag-cover .duo{ aspect-ratio:3/4; }
  .mag-lede{ font-size:19px; color:var(--paper); margin-bottom:16px; line-height:1.55; }
  .mag-tags{ display:flex; gap:10px; flex-wrap:wrap; }
  .mag-articles{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; border-top:1px solid var(--line); padding-top:32px; }
  .mag-article .date{ font-weight:700; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--acid); }
  .mag-article h4{ font-size:20px; margin:8px 0 6px; color:var(--paper); text-transform:none; }
  .mag-article h4 a{ text-decoration:none; }
  .mag-article h4 a:hover{ color:var(--accent); }
  .mag-article p{ font-size:13.5px; color:var(--muted); margin:0; }

  /* ===== NEWS ===== */
  .news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 40px; }
  .news-item .duo{ aspect-ratio:16/10; margin-bottom:16px; }
  .news-item .date{ font-weight:700; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--acid); }
  .news-item h4{ font-size:21px; margin:8px 0 10px; line-height:1.15; color:var(--paper); text-transform:none; }
  .news-item h4 a{text-decoration:none;}
  .news-item h4 a:hover{color:var(--accent);}
  .news-item p{ font-size:14px; color:var(--muted); }

  /* ===== BOOKS ===== */
  .book-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:24px; }
  .book .cover{
    display:block; background:var(--panel); border:1px solid var(--line); aspect-ratio:2/3;
    overflow:hidden; text-decoration:none;
  }
  .book .cover img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .2s ease, opacity .2s ease;
  }
  .book .cover:hover img{ transform:scale(1.04); opacity:0.9; }
  .book p{ font-size:12.5px; margin-top:10px; color:var(--muted); line-height:1.3; font-weight:600; }
  .books-more{ margin-top:32px; font-size:15px; text-align:center; color:var(--muted); }
  .books-more a{ color:var(--acid); text-decoration:none; font-weight:600; }

  /* ===== PODCASTS ===== */
  .pod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .pod-card{ background:var(--panel); padding:30px; display:flex; gap:18px; align-items:flex-start; }
  .pod-badge{
    width:52px; height:52px; flex:none; border-radius:50%; border:2px solid var(--accent); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:19px;
  }
  .pod-card.p2 .pod-badge{ border-color:var(--acid); color:var(--acid); }
  .pod-card.p3 .pod-badge{ border-color:var(--paper); color:var(--paper); }
  .pod-card.p4 .pod-badge{ border-color:var(--accent); color:var(--accent); }
  .pod-card.p5 .pod-badge{ border-color:var(--acid); color:var(--acid); }
  .pod-card h4{ font-size:20px; margin-bottom:8px; color:var(--paper); text-transform:none; }
  .pod-card p{ font-size:13.5px; color:var(--muted); margin:0 0 12px; }
  .pod-links{ display:flex; gap:16px; font-weight:700; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; }
  .pod-links a{ text-decoration:none; color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:1px; }

  /* ===== TEAM ===== */
  .team-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:28px; }
  .team-member .duo{ aspect-ratio:1; }
  .team-member.a2 .duo{ background:var(--panel); }
  .team-member.a2 .duo::after{ background:var(--acid); opacity:0.5; }
  .team-member h4{ font-size:17px; margin-top:16px; color:var(--paper); text-transform:none; }
  .team-member .role{ font-size:12.5px; color:var(--muted); margin-top:2px; }

  /* ===== STUDIOS ===== */
  .studio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
  .studio-card{ background:var(--panel); padding:32px; }
  .studio-card h3{ font-size:22px; margin-bottom:12px; color:var(--paper); }
  .studio-card p{ color:var(--muted); font-size:14.5px; }

  /* ===== CTA STRIP ===== */
  .cta-strip{ background:var(--accent); color:#0c0c0b; padding:64px 0; text-align:center; }
  .cta-strip h2{ font-size:clamp(32px,5.4vw,56px); color:#0c0c0b; margin-bottom:16px; }
  .cta-strip p{ color:#2a1108; max-width:56ch; margin:0 auto 28px; font-size:17px; font-weight:500;}
  .btn{
    display:inline-block; background:#0c0c0b; color:var(--paper); text-decoration:none;
    font-weight:700; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
    padding:14px 30px; border:2px solid #0c0c0b;
    transition:background .15s, color .15s;
  }
  .btn:hover{ background:transparent; color:#0c0c0b; }
  .btn.ghost{ background:transparent; color:#0c0c0b; margin-left:14px; }
  .btn.ghost:hover{ background:#0c0c0b; color:var(--paper); }

  /* ===== FOOTER ===== */
  footer{ padding:48px 0 60px; background:var(--panel); }
  .foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; padding-top:16px; }
  footer h5{ font-family:'Inter',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper); margin-bottom:16px; }
  footer ul{ list-style:none; padding:0; margin:0; font-size:14px; }
  footer li{ margin-bottom:9px; }
  footer a{ text-decoration:none; color:var(--muted); }
  footer a:hover{ color:var(--accent); }
  .copyright{ font-size:12.5px; color:var(--muted); margin-top:36px; padding-top:24px; border-top:1px solid var(--line); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 980px){
    .wrap{ padding:0 24px; }
    header.masthead{ padding:36px 0 20px; }
    .front{ grid-template-columns:1fr; gap:32px; padding:36px 0;}
    .divisions{ grid-template-columns:repeat(2,1fr); padding:36px 0; }
    .division{ border-left:none; border-top:1px solid var(--line); padding:24px 0; }
    .division:nth-child(1),.division:nth-child(2){ border-top:none; }
    .section{ padding:44px 0; }
    .section-head{ margin-bottom:32px; }
    .news-grid{ grid-template-columns:1fr; gap:32px;}
    .book-grid{ grid-template-columns:repeat(3,1fr); gap:16px; }
    .pod-grid{ grid-template-columns:1fr; }
    .pod-card{ padding:22px; }
    .team-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
    .studio-grid{ grid-template-columns:1fr; }
    .studio-card{ padding:24px; }
    .foot-grid{ grid-template-columns:1fr 1fr; gap:24px; }
    .mag-layout{ grid-template-columns:1fr; gap:24px; margin-bottom:32px; }
    .mag-articles{ grid-template-columns:1fr; gap:20px; padding-top:24px; }
    .cta-strip{ padding:44px 0; }
    footer{ padding:36px 0 44px; }
    nav.primary{ padding:14px 0; }
    nav.primary .wrap{ gap:16px; }
  }
  @media (max-width:560px){
    .wrap{ padding:0 18px; }
    .book-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .team-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
    .divisions{ grid-template-columns:1fr; padding:24px 0; }
    .division{ padding:20px 0; }
    .section{ padding:36px 0; }
    .front{ padding:28px 0; }
  }

/* ================================================================
   SITE-WIDE PAGE / POST CONTENT (used by header.php, footer.php,
   page.php, single.php, archive.php, index.php)
   ================================================================ */

.page-title{
  font-size:clamp(34px,5vw,58px);
  color:var(--paper);
  margin-bottom:18px;
}
.page-meta{
  font-weight:700; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--acid); margin-bottom:14px; display:block;
  font-family:'Inter',sans-serif;
}
.page-hero-image{ margin:0 0 40px; }
.page-hero-image .duo{ aspect-ratio:21/9; }

/* Rich text content typed by editors in wp-admin */
.entry-content{ font-size:17px; line-height:1.75; color:var(--paper); max-width:74ch; margin:0 auto; }
.entry-content p{ margin:0 0 22px; color:#dedad0; }
.entry-content h2,.entry-content h3,.entry-content h4{
  color:var(--paper); margin:44px 0 18px; text-transform:uppercase;
}
.entry-content h2{ font-size:32px; }
.entry-content h3{ font-size:25px; }
.entry-content h4{ font-size:20px; }
.entry-content a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.entry-content a:hover{ color:var(--acid); }
.entry-content ul,.entry-content ol{ color:#dedad0; margin:0 0 22px; padding-left:24px; }
.entry-content li{ margin-bottom:8px; }
.entry-content blockquote{
  border-left:4px solid var(--accent); margin:30px 0; padding:6px 0 6px 24px;
  font-size:19px; color:var(--paper); font-style:italic;
}
.entry-content img{ border:1px solid var(--line); margin:10px 0 30px; height:auto; max-width:100%; }
.entry-content figcaption{ font-size:13px; color:var(--muted); margin-top:-20px; margin-bottom:30px; }
.entry-content hr{ border:none; border-top:1px solid var(--line); margin:40px 0; }
.entry-content table{ width:100%; border-collapse:collapse; margin-bottom:26px; }
.entry-content table th, .entry-content table td{ border:1px solid var(--line); padding:10px 14px; text-align:left; font-size:14.5px; }
.entry-content table th{ color:var(--paper); font-family:'Big Shoulders Display',sans-serif; text-transform:uppercase; letter-spacing:0.02em; }
.entry-content table td{ color:var(--muted); }

/* Category / tag chips reused on single posts and archive cards */
.post-cats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }

/* ================================================================
   BLOG ARCHIVE / INDEX  ("From the Newsroom" style card grid)
   ================================================================ */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 40px; }
.blog-card .duo{ aspect-ratio:16/10; margin-bottom:16px; }
.blog-card .date{ font-weight:700; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--acid); font-family:'Inter',sans-serif; }
.blog-card h3{ font-size:22px; margin:8px 0 10px; line-height:1.15; color:var(--paper); text-transform:none; }
.blog-card h3 a{ text-decoration:none; }
.blog-card h3 a:hover{ color:var(--accent); }
.blog-card p{ font-size:14px; color:var(--muted); margin:0 0 14px; }
.blog-card .read-more{ font-weight:700; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent); text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:2px; }
.no-posts{ text-align:center; color:var(--muted); padding:60px 0; font-size:17px; }

/* Pagination */
.site-pagination{ display:flex; justify-content:center; gap:14px; margin-top:56px; flex-wrap:wrap; }
.site-pagination a, .site-pagination span{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--line); color:var(--paper); text-decoration:none;
}
.site-pagination a:hover{ border-color:var(--accent); color:var(--accent); }
.site-pagination .current{ background:var(--accent); border-color:var(--accent); color:#0c0c0b; }

/* Single post navigation (prev/next) */
.post-nav{ display:flex; justify-content:space-between; gap:30px; margin-top:56px; padding-top:30px; border-top:1px solid var(--line); flex-wrap:wrap; }
.post-nav a{ text-decoration:none; color:var(--muted); font-size:14px; max-width:340px; }
.post-nav a:hover{ color:var(--accent); }
.post-nav .dir{ display:block; font-weight:700; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--acid); margin-bottom:6px; font-family:'Inter',sans-serif; }

/* Comments */
.comments-area{ margin-top:60px; max-width:74ch; margin-left:auto; margin-right:auto; }
.comments-area h2,.comments-area h3{ color:var(--paper); font-size:26px; margin-bottom:24px; }
.comment-list{ list-style:none; margin:0 0 30px; padding:0; }
.comment-list li{ border-top:1px solid var(--line); padding:22px 0; }
.comment-author{ font-weight:700; color:var(--paper); font-size:14.5px; }
.comment-meta{ font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.comment-content p{ color:#dedad0; font-size:15px; }
.comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--paper);
  padding:12px 14px; font-family:'Inter',sans-serif; font-size:14.5px; margin-bottom:16px;
}
.comment-respond textarea{ min-height:140px; }
.comment-respond .form-submit input{
  background:var(--accent); color:#0c0c0b; border:none; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; padding:12px 26px; cursor:pointer;
}
.comment-respond .form-submit input:hover{ background:var(--acid); }

/* Responsive */
@media (max-width: 980px){
  .blog-grid{ grid-template-columns:1fr; gap:32px; }
  .page-hero-image .duo{ aspect-ratio:16/10; }
  .page-hero-image{ margin-bottom:28px; }
  .post-nav{ margin-top:36px; padding-top:20px; gap:20px; }
  .comments-area{ margin-top:40px; }
}