/*
Theme Name: WP Black
Theme URI: https://example.com/wp-black
Author: WP Black
Description: Lightweight dark editorial WordPress theme. Semantic HTML5, responsive, SEO-ready and compatible with major SEO plugins.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: wp-black
*/

:root{
  --black:#1d1d1d;
  --black-2:#242424;
  --white:#fff;
  --gray:#a4a4a4;
  --line:#343434;
  --max:1240px;
  --reading:780px;
  --radius:2px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.site-header{border-bottom:1px solid var(--line);position:relative;background:var(--black)}
.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.site-brand{font-size:22px;font-weight:800;letter-spacing:-.04em}
.site-description{color:var(--gray);font-size:12px;margin:2px 0 0}
.main-navigation ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:wrap}
.main-navigation a{font-size:13px;text-transform:uppercase;letter-spacing:.08em}
main{min-height:60vh}
.hero{padding:110px 0 90px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(52px,9vw,128px);line-height:.9;letter-spacing:-.07em;max-width:1000px;margin:0 0 30px}
.hero p{max-width:680px;color:#c6c6c6;font-size:18px}
.section{padding:75px 0}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--gray);margin:0 0 35px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.post-card{background:var(--black);padding:24px;min-width:0}
.post-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--black-2);margin:-24px -24px 24px}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card h2{font-size:26px;line-height:1.1;letter-spacing:-.035em;margin:8px 0 15px}
.meta{font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.08em}
.entry-header{padding:100px 0 55px;border-bottom:1px solid var(--line)}
.entry-header h1{font-size:clamp(46px,7vw,92px);line-height:.95;letter-spacing:-.06em;max-width:1050px;margin:15px 0}
.breadcrumb{font-size:12px;color:var(--gray);padding-top:25px}
.entry-content{max-width:var(--reading);padding:60px 0;font-size:18px}
.entry-content h2{font-size:38px;line-height:1.1;letter-spacing:-.04em;margin-top:60px}
.entry-content h3{font-size:27px;line-height:1.2;margin-top:45px}
.entry-content p{margin:0 0 25px}
.entry-content ul,.entry-content ol{padding-left:25px}
.entry-content blockquote{margin:40px 0;padding:25px;border-left:2px solid var(--white);font-size:25px;line-height:1.3}
.entry-content pre,.entry-content code{background:var(--black-2)}
.entry-content pre{padding:20px;overflow:auto}
.featured-image{margin-top:40px}
.featured-image img{width:100%}
.pagination{display:flex;justify-content:space-between;padding:40px 0;border-top:1px solid var(--line)}
.site-footer{border-top:1px solid var(--line);margin-top:70px;padding:50px 0;color:var(--gray);font-size:13px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.alignwide{max-width:var(--max);margin-inline:auto}
.alignfull{width:100%;margin-left:0;margin-right:0}
.wp-caption{max-width:100%}
.wp-block-image img{height:auto}
.search-form{display:flex;gap:10px}
.search-form input{background:transparent;border:1px solid var(--line);color:#fff;padding:12px 15px;min-width:0}
.search-form input[type=submit]{cursor:pointer;background:#fff;color:#1d1d1d;border:0}
@media(max-width:900px){
  .post-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .header-inner{min-height:70px;align-items:flex-start;padding:18px 0;flex-direction:column}
  .main-navigation ul{gap:15px}
  .hero{padding:75px 0 60px}
  .hero h1{font-size:58px}
  .post-grid{grid-template-columns:1fr}
  .entry-header{padding:65px 0 40px}
  .entry-header h1{font-size:48px}
  .entry-content{font-size:17px;padding:45px 0}
  .footer-grid{grid-template-columns:1fr}
}