/* ==== Base — shared across every page ==== */
:root{--bg:#EDEBE4;--surface:#fff;--text:#111111;--muted:#5a5a5a;--border:#deded9;--accent:#1D4ED8;--accent2:#C81E42;--max:1120px;--code-bg:#1e1e1c;--code-text:#f2f2ef}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}
h1{font-size:clamp(34px,6vw,56px);font-weight:700;line-height:1.1;letter-spacing:-.022em}
h2{font-size:36px;font-weight:700;line-height:1.1;letter-spacing:0}
h3{font-size:30px;font-weight:700;line-height:1.1;letter-spacing:0}
h4{font-size:24px;font-weight:700;line-height:1.1;letter-spacing:0}
p{font-size:18px;font-weight:400;line-height:1.4;letter-spacing:0}
a{color:inherit;text-decoration:none}
.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

header{padding:24px 0;border-bottom:1px solid var(--border)}
nav{display:flex;justify-content:space-between;align-items:center;gap:24px}
.logo{font-weight:800}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.nav{display:flex;gap:25px;color:var(--muted);font-size:14px}
.nav a:hover{color:var(--text)}

.ua-badge{position:relative}
.ua-badge summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--text);color:#fff;font-size:12px;font-weight:800}
.ua-badge summary::-webkit-details-marker{display:none}
.ua-badge .panel{position:absolute;right:0;top:calc(100% + 8px);width:230px;padding:16px;background:var(--bg);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.12);font-size:13px;color:var(--muted);z-index:10}
.ua-badge .panel a{display:inline-block;margin-top:10px;font-weight:750;color:var(--text);border-bottom:1px solid var(--text)}
.ua-badge .panel a:hover{color:var(--accent);border-color:var(--accent)}

footer{padding:30px 0;border-top:1px solid var(--border);color:var(--muted);font-size:13px}

.eyebrow{color:var(--accent);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}

/* ==== Home (index.html) ==== */
body.page-home .logo{letter-spacing:-.03em}
body.page-home .ua-badge .panel{background:var(--surface)}
body.page-home .eyebrow{margin:0 0 20px;font-size:14px}
body.page-home .hero{padding:110px 0 100px}
body.page-home .hero h1{max-width:850px;margin:0}
body.page-home .lead{max-width:650px;margin:30px 0 0;color:var(--muted);font-size:clamp(20px,2.5vw,26px);line-height:1.35;letter-spacing:-.02em}
body.page-home .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
body.page-home .button{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:1px solid var(--text);border-radius:999px;font-size:14px;font-weight:750}
body.page-home .primary{background:var(--text);color:#fff}
body.page-home .primary:hover{background:var(--accent);border-color:var(--accent)}
body.page-home .secondary{border-color:var(--border)}
body.page-home .secondary:hover{border-color:var(--text)}
body.page-home .hero-stats{display:flex;flex-wrap:wrap;gap:10px 24px;margin:36px 0 0;color:var(--muted);font-size:14px;font-weight:750}
body.page-home .hero-stats span:not(:first-child){position:relative;padding-left:24px}
body.page-home .hero-stats span:not(:first-child)::before{content:'·';position:absolute;left:-2px}
body.page-home section{padding:90px 0;border-top:1px solid var(--border)}
body.page-home .section-head{display:grid;grid-template-columns:1fr 2fr;gap:50px;margin-bottom:50px}
body.page-home .number{color:var(--muted);font-size:14px;font-weight:750}
body.page-home .title{margin:0}
body.page-home .intro{max-width:680px;margin:20px 0 0;color:var(--muted);font-size:18px}
body.page-home .projects{display:grid;gap:24px}
body.page-home .project{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:18px}
body.page-home .visual{min-height:300px;overflow:hidden;border-radius:12px;background:#E0DDD2}
body.page-home .visual img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
body.page-home .type{margin:0 0 10px;color:var(--accent2);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
body.page-home .project h3{margin:0}
body.page-home .tags{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0}
body.page-home .tag{padding:5px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px}
body.page-home .link{font-weight:750;font-size:14px}
body.page-home .link:hover{color:var(--accent)}
body.page-home .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
body.page-home .value{padding:30px;background:var(--bg)}
body.page-home .value h3{margin:0 0 10px}
body.page-home .value p{margin:0;color:var(--muted);font-size:15px}
body.page-home .cta{padding:120px 0}
body.page-home .cta h2{max-width:800px;margin:0}
body.page-home .cta p{max-width:600px;color:var(--muted);font-size:19px;margin:25px 0 35px}
body.page-home .contact-links{display:flex;flex-wrap:wrap;gap:12px}
body.page-home .writing{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
body.page-home .write-post{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:18px}
body.page-home .write-post .visual{min-height:200px;border-radius:0}
body.page-home .write-post .visual.no-image{display:flex;align-items:center;justify-content:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:26px;font-weight:750;color:var(--code-text);background:var(--code-bg)}
body.page-home .write-body{padding:26px}
body.page-home .write-body h3{margin:0 0 10px}
body.page-home .write-body p{margin:0 0 16px;color:var(--muted);font-size:15px}
body.page-home .footer{display:flex;justify-content:space-between}
@media(max-width:800px){
  body.page-home .container{width:min(calc(100% - 28px),var(--max))}
  body.page-home .nav-links a:nth-child(1){display:none}
  body.page-home .ua-badge .label{display:none}
  body.page-home .hero{padding:80px 0}
  body.page-home .section-head,body.page-home .project,body.page-home .value-grid,body.page-home .writing{grid-template-columns:1fr}
  body.page-home .section-head{gap:15px}
  body.page-home .project{padding:20px}
  body.page-home .visual{min-height:220px}
  body.page-home .cta{padding:90px 0}
  body.page-home .footer{flex-direction:column;gap:10px}
}

/* ==== About (about.html) ==== */
body.page-about main{padding:90px 0}
body.page-about .hero h1{max-width:850px;margin:15px 0 30px}
body.page-about .lead{max-width:760px;font-size:22px;color:var(--muted)}
body.page-about section{padding:70px 0;border-top:1px solid var(--border)}
body.page-about h2{margin:0 0 30px}
body.page-about .grid{display:grid;grid-template-columns:1fr 2fr;gap:60px}
body.page-about .muted{color:var(--muted)}
body.page-about .timeline{border-top:1px solid var(--border)}
body.page-about .job{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding:28px 0;border-bottom:1px solid var(--border)}
body.page-about .job h3{margin:0}
body.page-about .job p{margin:5px 0 12px;color:var(--muted)}
body.page-about .job .description{max-width:700px}
body.page-about .skills{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
body.page-about .skill{padding:28px;background:var(--bg)}
body.page-about .skill h3{margin:0 0 10px}
body.page-about .skill p{margin:0;color:var(--muted)}
@media(max-width:750px){
  body.page-about .container{width:min(calc(100% - 28px),var(--max))}
  body.page-about .nav a:nth-child(1){display:none}
  body.page-about .ua-badge .label{display:none}
  body.page-about .grid,body.page-about .job,body.page-about .skills{grid-template-columns:1fr}
  body.page-about .job{gap:8px}
  body.page-about main{padding:65px 0}
}

/* ==== Blog list (blogs.html) ==== */
body.page-blog-list{min-height:100vh;display:flex;flex-direction:column}
body.page-blog-list main{padding:80px 0 100px}
body.page-blog-list h1{margin:15px 0 50px}
body.page-blog-list .posts{display:grid;gap:24px}
body.page-blog-list .post{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:18px}
body.page-blog-list .post .visual{border-radius:12px;overflow:hidden;min-height:150px;background:#E0DDD2}
body.page-blog-list .post .visual img{width:100%;height:100%;object-fit:cover;display:block}
body.page-blog-list .post .visual.no-image{display:flex;align-items:center;justify-content:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:26px;font-weight:750;color:var(--muted);background:var(--code-bg)}
body.page-blog-list .post .visual.no-image span{color:var(--code-text)}
body.page-blog-list .post h2{margin:0 0 10px}
body.page-blog-list .post p{margin:0 0 14px;color:var(--muted)}
body.page-blog-list .post .link{font-weight:750;font-size:14px}
body.page-blog-list .post .link:hover{color:var(--accent)}
@media(max-width:700px){
  body.page-blog-list .container{width:min(calc(100% - 28px),var(--max))}
  body.page-blog-list .nav a:nth-child(1){display:none}
  body.page-blog-list .ua-badge .label{display:none}
  body.page-blog-list .post{grid-template-columns:1fr}
  body.page-blog-list .post .visual{min-height:180px}
}

/* ==== Blog post (blog-*.html) ==== */
body.page-post main{padding:80px 0 100px}
body.page-post article{max-width:760px;margin:auto}
body.page-post .back{display:inline-block;margin-bottom:34px;font-weight:750;color:var(--muted);border-bottom:1px solid var(--border)}
body.page-post .back:hover{color:var(--text);border-color:var(--text)}
body.page-post h1.title{max-width:none;margin:15px 0 20px}
body.page-post .meta{color:var(--muted);font-size:14px;margin:0 0 36px}
body.page-post .article-image{margin:0 0 40px}
body.page-post .article-image img{width:100%;border-radius:14px;display:block;background:var(--surface);border:1px solid var(--border)}
body.page-post .article-body h2{margin:44px 0 16px}
body.page-post .article-body h3{margin:34px 0 14px}
body.page-post .article-body p{color:var(--text);margin:0 0 18px}
body.page-post .article-body p+p{margin-top:-4px}
body.page-post .article-body ul{margin:0 0 20px;padding-left:22px}
body.page-post .article-body li{font-size:17px;margin-bottom:8px}
body.page-post .article-body a{font-weight:650;border-bottom:1px solid var(--border)}
body.page-post .article-body a:hover{color:var(--accent);border-color:var(--accent)}
body.page-post .article-body strong{font-weight:750}
body.page-post .article-body details{margin:24px 0;padding:20px 22px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
body.page-post .article-body summary{cursor:pointer;font-weight:750}
body.page-post .article-body details p{margin:14px 0}
body.page-post .article-body details pre{margin:14px 0 0}
body.page-post .article-body pre{background:var(--code-bg);color:var(--code-text);padding:18px 20px;border-radius:12px;overflow-x:auto;margin:20px 0 24px;font-size:13.5px;line-height:1.65}
body.page-post .article-body pre code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:none;padding:0;color:inherit;font-size:inherit}
body.page-post .article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--border);padding:2px 6px;border-radius:5px;font-size:.88em}
body.page-post .article-body figure{margin:20px 0 24px}
body.page-post .article-body figure img{width:100%;border-radius:14px;display:block;background:var(--surface);border:1px solid var(--border)}
body.page-post .article-body figcaption{margin-top:10px;text-align:center;font-size:13px;color:var(--muted)}
body.page-post .video{position:relative;width:100%;padding-top:56.25%;margin-top:16px;border-radius:10px;overflow:hidden;background:#000}
body.page-post .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
body.page-post .hashtags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--border)}
body.page-post .hashtags a{display:inline-block;padding:6px 14px;border:1px solid var(--border);border-radius:999px;font-size:13px;font-weight:650;color:var(--muted)}
body.page-post .hashtags a:hover{color:var(--text);border-color:var(--text)}
@media(max-width:700px){
  body.page-post .container{width:min(calc(100% - 28px),var(--max))}
  body.page-post .nav a:nth-child(1){display:none}
  body.page-post .ua-badge .label{display:none}
  body.page-post main{padding:56px 0 70px}
}
.mt-80{margin-top:80px}