/*
Theme Name: Custom Auto Theme
Author: System
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Karla:wght@300;400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Karla',sans-serif;color:#111;background:#fff;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

:root{
--black:#111;--dark:#222;--gray:#666;--mid:#999;
--light:#e8e8e8;--lighter:#f5f5f5;--white:#fff;
--font-h:'Cormorant Garamond',Georgia,serif;
--font-b:'Karla',sans-serif;
--sidebar-w:260px;
}

/* PROGRESS BAR */
.h-progress{position:fixed;top:0;left:0;width:0;height:3px;background:var(--black);z-index:1000;transition:width .1s linear}

/* HEADER */
.h-header{background:var(--white);border-bottom:1px solid var(--light);position:sticky;top:0;z-index:99}
.h-header-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:56px}
.h-logo{font-family:var(--font-h);font-size:1.8rem;font-weight:700;color:var(--black);letter-spacing:-.03em}
.h-logo span{font-weight:400;font-style:italic;color:var(--gray)}
.h-nav{display:flex;gap:20px;align-items:center}
.h-nav a{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--gray);transition:color .2s}
.h-nav a:hover{color:var(--black)}
.h-burger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:8px;background:none;border:none}
.h-burger span{width:22px;height:2px;background:var(--black);transition:.3s}
.h-mobile-nav{display:none;background:var(--white);border-bottom:1px solid var(--light);padding:16px 24px}
.h-mobile-nav.open{display:block}
.h-mobile-nav a{display:block;padding:8px 0;font-size:.85rem;font-weight:500;color:var(--dark);border-bottom:1px solid var(--lighter)}

/* LAYOUT */
.h-layout{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:var(--sidebar-w) 1fr;gap:0;min-height:80vh}

/* SIDEBAR */
.h-sidebar{border-right:1px solid var(--light);padding:32px 24px 32px 0;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;scrollbar-width:none}
.h-sidebar::-webkit-scrollbar{display:none}
.h-sidebar-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--mid);margin-bottom:12px;margin-top:24px}
.h-sidebar-label:first-child{margin-top:0}
.h-sidebar-link{display:block;font-size:.85rem;color:var(--dark);padding:6px 0;border-bottom:1px solid var(--lighter);transition:color .2s,padding-left .2s}
.h-sidebar-link:hover{color:var(--black);padding-left:6px}
.h-sidebar-link.active{color:var(--black);font-weight:700;border-left:2px solid var(--black);padding-left:8px}
.h-sidebar-trend{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--lighter)}
.h-sidebar-trend-num{font-family:var(--font-h);font-size:1.6rem;font-weight:700;color:var(--light);line-height:1;min-width:28px}
.h-sidebar-trend-title{font-size:.82rem;color:var(--dark);line-height:1.4}
.h-sidebar-trend-cat{font-size:.65rem;color:var(--mid);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.h-sidebar-tag-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.h-sidebar-tag{font-size:.72rem;padding:3px 10px;background:var(--lighter);color:var(--gray);border-radius:2px;transition:all .2s}
.h-sidebar-tag:hover{background:var(--black);color:var(--white)}

/* ARTICLE */
.h-article{padding:40px 0 60px 40px}
.h-article-tag{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--mid);margin-bottom:12px}
.h-article-title{font-family:var(--font-h);font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--black);line-height:1.15;margin-bottom:16px;max-width:720px}
.h-article-lead{font-size:1.1rem;color:var(--gray);max-width:640px;margin-bottom:20px;line-height:1.8}
.h-article-meta{font-size:.78rem;color:var(--mid);display:flex;gap:16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--light);margin-bottom:32px}
.h-article-meta strong{color:var(--dark)}
.h-article-body{max-width:720px}
.h-article-body h2{font-family:var(--font-h);font-size:1.6rem;font-weight:700;color:var(--black);margin:40px 0 16px;padding-left:16px;border-left:3px solid var(--black);line-height:1.3}
.h-article-body h3{font-family:var(--font-h);font-size:1.2rem;color:var(--dark);margin:28px 0 12px}
.h-article-body p{margin-bottom:18px;color:#2a2a2a;font-size:1rem;line-height:1.8}
.h-article-body p.h-active-para{background:var(--lighter);margin-left:-12px;margin-right:-12px;padding:12px;border-left:2px solid var(--black);transition:all .3s ease}

/* IMAGE BLOCKS */
.h-img-block{margin:32px 0;overflow:hidden;max-width:720px}
.h-img-block img{width:100%;height:320px;object-fit:cover;filter:grayscale(20%);transition:filter .4s}
.h-img-block img:hover{filter:grayscale(0)}
.h-img-caption{font-size:.75rem;color:var(--mid);margin-top:8px;font-style:italic}

/* HIGHLIGHT BOX */
.h-highlight{background:var(--black);color:var(--white);padding:28px 32px;margin:32px 0;max-width:720px}
.h-highlight h3{font-family:var(--font-h);font-size:1.1rem;margin-bottom:10px;color:#ccc;font-weight:400;font-style:italic}
.h-highlight p{color:#ddd;font-size:.95rem;line-height:1.7;margin-bottom:0}

/* TIP MARKER */
.h-tip{background:var(--lighter);border-left:2px solid var(--black);padding:20px 24px;margin:28px 0;max-width:720px}
.h-tip-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--mid);margin-bottom:6px}
.h-tip p{font-size:.9rem;color:var(--dark);margin-bottom:0;line-height:1.7}

/* QUOTE */
.h-quote{margin:36px 0;padding:24px 0;border-top:1px solid var(--light);border-bottom:1px solid var(--light);max-width:720px}
.h-quote blockquote{font-family:var(--font-h);font-size:1.3rem;font-style:italic;color:var(--dark);line-height:1.5;margin-bottom:8px}
.h-quote cite{font-size:.78rem;color:var(--mid);font-style:normal}

/* CARDS ROW */
.h-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0;max-width:720px}
.h-card{border:1px solid var(--light);padding:20px;transition:border-color .2s}
.h-card:hover{border-color:var(--black)}
.h-card h4{font-family:var(--font-h);font-size:1rem;color:var(--black);margin-bottom:8px}
.h-card p{font-size:.84rem;color:var(--gray);line-height:1.6}
.h-card-tag{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mid);margin-bottom:6px;display:block}

/* LIST BLOCK */
.h-list{margin:28px 0;max-width:720px}
.h-list-item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--lighter)}
.h-list-num{font-family:var(--font-h);font-size:1.4rem;font-weight:700;color:var(--light);min-width:32px;line-height:1}
.h-list-text{font-size:.9rem;color:var(--dark);line-height:1.6}

/* NEWSLETTER */
.h-newsletter{background:var(--lighter);padding:32px;margin:40px 0;max-width:720px;text-align:center}
.h-newsletter h3{font-family:var(--font-h);font-size:1.3rem;color:var(--black);margin-bottom:8px}
.h-newsletter p{font-size:.85rem;color:var(--gray);margin-bottom:16px}
.h-nl-form{display:flex;gap:8px;max-width:400px;margin:0 auto}
.h-nl-form input[type=email]{flex:1;padding:10px 14px;border:1px solid var(--light);background:var(--white);font-family:var(--font-b);font-size:.85rem;outline:none}
.h-nl-form input[type=email]:focus{border-color:var(--black)}
.h-nl-btn{padding:10px 20px;background:var(--black);color:var(--white);border:none;font-family:var(--font-b);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.h-nl-btn:hover{background:var(--dark)}

/* RELATED ARTICLES */
.h-related{margin:48px 0;max-width:720px}
.h-related h3{font-family:var(--font-h);font-size:1.2rem;color:var(--black);margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid var(--light)}
.h-related-item{display:block;padding:14px 0;border-bottom:1px solid var(--lighter);transition:padding-left .2s}
.h-related-item:hover{padding-left:8px}
.h-related-item span{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mid);display:block;margin-bottom:4px}
.h-related-item strong{font-size:.95rem;color:var(--dark);font-weight:600}

/* FOOTER */
.h-footer{background:var(--black);color:#888;padding:40px 24px 20px}
.h-footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.h-footer h4{color:var(--white);font-family:var(--font-h);font-size:1rem;margin-bottom:14px}
.h-footer p{font-size:.82rem;line-height:1.7}
.h-footer a{color:#777;font-size:.82rem;display:block;margin-bottom:6px;transition:color .2s}
.h-footer a:hover{color:var(--white)}
.h-footer-bottom{max-width:1280px;margin:24px auto 0;padding-top:16px;border-top:1px solid #222;text-align:center;font-size:.72rem;color:#555}
.h-footer-disclaimer{max-width:1280px;margin:12px auto 0;font-size:.7rem;color:#444;text-align:center;line-height:1.6}

/* COOKIE BANNER */
.h-cookie-overlay{position:fixed;bottom:0;right:0;left:0;z-index:200;pointer-events:none}
#h-cookie-toggle{display:none}
.h-cookie-bar{background:var(--black);color:#ccc;padding:16px 24px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-size:.8rem;pointer-events:auto;transition:transform .3s}
#h-cookie-toggle:checked~.h-cookie-overlay .h-cookie-bar{transform:translateY(100%);pointer-events:none}
.h-cookie-bar a{color:var(--white);text-decoration:underline}
.h-cookie-accept,.h-cookie-reject{padding:8px 18px;border:none;font-family:var(--font-b);font-size:.75rem;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;min-height:44px;min-width:44px}
.h-cookie-accept{background:var(--white);color:var(--black)}
.h-cookie-reject{background:transparent;color:#aaa;border:1px solid #444}

/* SUCCESS PAGE */
.h-success{text-align:center;padding:120px 24px;max-width:600px;margin:0 auto}
.h-success h1{font-family:var(--font-h);font-size:2.4rem;margin-bottom:16px}
.h-success p{color:var(--gray);margin-bottom:24px}
.h-success a{display:inline-block;padding:12px 28px;background:var(--black);color:var(--white);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;transition:background .2s}
.h-success a:hover{background:var(--dark)}

/* 404 */
.h-404{text-align:center;padding:100px 24px}
.h-404 h1{font-family:var(--font-h);font-size:6rem;color:var(--light);margin-bottom:8px}
.h-404 h2{font-family:var(--font-h);font-size:1.6rem;margin-bottom:16px}
.h-404 p{color:var(--gray);margin-bottom:32px}
.h-404-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.h-404-links a{padding:10px 20px;border:1px solid var(--light);font-size:.85rem;transition:all .2s}
.h-404-links a:hover{border-color:var(--black);background:var(--black);color:var(--white)}

/* LEGAL */
.h-legal{max-width:760px;margin:0 auto;padding:48px 24px 60px}
.h-legal h1{font-family:var(--font-h);font-size:2rem;margin-bottom:24px;color:var(--black)}
.h-legal h2{font-family:var(--font-h);font-size:1.2rem;margin:28px 0 10px;color:var(--dark)}
.h-legal p{font-size:.9rem;color:var(--gray);margin-bottom:14px;line-height:1.7}

/* ARTICLE PAGES (non-home) */
.h-article-page{max-width:760px;margin:0 auto;padding:40px 24px 60px}
.h-article-page .h-article-tag{margin-bottom:12px}
.h-article-page h1{font-family:var(--font-h);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;color:var(--black);line-height:1.2;margin-bottom:16px}
.h-article-page .h-article-meta{margin-bottom:28px}
.h-article-page .h-article-body h2{margin-top:36px}

/* RESPONSIVE */
@media(max-width:900px){
.h-layout{grid-template-columns:1fr;--sidebar-w:0}
.h-sidebar{display:none}
.h-article{padding:28px 0 40px}
.h-nav{display:none}
.h-nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--white);padding:16px 24px;border-bottom:1px solid var(--light);z-index:50}
.h-burger{display:flex}
.h-footer-inner{grid-template-columns:1fr}
.h-cards{grid-template-columns:1fr}
.h-nl-form{flex-direction:column}
}
@media(max-width:480px){
.h-article-title{font-size:1.6rem}
.h-article{padding:20px 0 32px}
.h-highlight{padding:20px}
}

/* ANIMATIONS */
@keyframes h-fadein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.h-anim{animation:h-fadein .5s ease forwards}
.h-anim-d1{animation-delay:.1s;opacity:0}
.h-anim-d2{animation-delay:.2s;opacity:0}
.h-anim-d3{animation-delay:.3s;opacity:0}