/* upScale blog — shares the v2 design language (single font Inter, solid accent, no gradients) */
:root{
  --ink:#0a0c0b; --ink-2:#131715;
  --paper:#ffffff; --paper-2:#f3f2ee;
  --on-dark:#ffffff; --on-dark-mut:#9aa39e;
  --on-paper:#0a0c0b; --on-paper-mut:#4f574f;
  --accent:#17c79a; --accent-ink:#04140e;
  --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s10:40px;
  --s12:48px; --s16:64px; --s20:80px; --s24:96px; --s32:128px;
  --maxw:1160px; --prose:720px; --radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ink); color:var(--on-dark);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s6)}
.prose-wrap{max-width:var(--prose); margin:0 auto; padding:0 var(--s6)}

h1,h2,h3{margin:0; font-weight:800; letter-spacing:-0.02em; line-height:1.05}
.kicker{font-size:13px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:0; font-family:inherit;
  font-weight:700; font-size:14px; letter-spacing:0.04em; text-transform:uppercase;
  padding:13px 24px; border-radius:var(--radius); transition:transform .15s ease, background-color .15s ease}
.btn-accent{background:var(--accent); color:var(--accent-ink)}
.btn-accent:hover{transform:translateY(-2px); background:#1ad9a9}

/* header */
header{position:sticky; top:0; z-index:60; background:var(--ink)}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px; letter-spacing:-0.01em}
.brand img{width:30px; height:30px; border-radius:7px}
.nav-right{display:flex; align-items:center; gap:var(--s6)}
.nav-link{font-size:14px; font-weight:600; color:var(--on-dark-mut)}
.nav-link:hover{color:var(--on-dark)}
.nav .btn{padding:11px 20px; font-size:13px}

/* ---- blog index ---- */
.blog-hero{padding:var(--s24) 0 var(--s12)}
.blog-hero h1{font-size:clamp(40px,7vw,72px); font-weight:900; text-transform:uppercase; letter-spacing:-0.03em}
.blog-hero p{margin-top:var(--s4); color:var(--on-dark-mut); font-size:clamp(17px,2vw,20px); max-width:52ch}

.post-list{padding-bottom:var(--s24); display:grid; gap:var(--s4)}
.post-card{display:block; background:var(--ink-2); border-radius:16px; padding:var(--s10);
  transition:transform .16s ease, background-color .16s ease}
.post-card:hover{transform:translateY(-2px); background:#181d1b}
.post-card .meta{display:flex; gap:10px; align-items:center; color:var(--on-dark-mut); font-size:13px; margin-bottom:var(--s4)}
.post-card .cat{color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.08em}
.post-card h2{font-size:clamp(24px,3vw,34px); text-transform:uppercase; letter-spacing:-0.02em; max-width:24ch}
.post-card p{margin-top:var(--s4); color:var(--on-dark-mut); font-size:17px; max-width:64ch}
.post-card .more{margin-top:var(--s6); display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em}

/* ---- article ---- */
.post-head{padding:var(--s24) 0 var(--s16); border-bottom:0}
.post-head .back{color:var(--on-dark-mut); font-size:14px; font-weight:600}
.post-head .back:hover{color:var(--accent)}
.post-head h1{margin-top:var(--s8); font-size:clamp(34px,5.5vw,60px); font-weight:900; text-transform:uppercase; letter-spacing:-0.025em; max-width:20ch}
.post-head .dek{margin-top:var(--s6); color:var(--on-dark-mut); font-size:clamp(18px,2.2vw,22px); max-width:54ch}
.post-head .byline{margin-top:var(--s8); display:flex; align-items:center; gap:12px; color:var(--on-dark-mut); font-size:14px}
.post-head .byline .av{width:40px; height:40px; border-radius:50%; background:var(--ink-2); box-shadow:inset 0 0 0 2px var(--accent); flex:none}
.post-head .byline b{color:var(--on-dark); font-weight:700}

/* article body on paper for readability */
.post-body{background:var(--paper); color:var(--on-paper); padding:var(--s20) 0 var(--s24)}
.post-body .prose-wrap > *{max-width:var(--prose)}
.post-body p{margin:0 0 var(--s6); font-size:19px; line-height:1.75; color:#1c211e}
.post-body h2{margin:var(--s16) 0 var(--s4); font-size:clamp(24px,3.4vw,32px); text-transform:uppercase; letter-spacing:-0.02em; color:var(--on-paper)}
.post-body h3{margin:var(--s10) 0 var(--s3); font-size:21px; color:var(--on-paper)}
.post-body a{color:#0a8f6e; text-decoration:underline; text-underline-offset:3px; font-weight:600}
.post-body a:hover{color:var(--accent)}
.post-body strong{font-weight:700; color:var(--on-paper)}
.post-body em{font-style:italic}
.post-body ul{margin:0 0 var(--s6); padding-left:0; list-style:none}
.post-body ul li{position:relative; padding:6px 0 6px 26px; font-size:19px; line-height:1.7; color:#1c211e}
.post-body ul li::before{content:""; position:absolute; left:0; top:16px; width:11px; height:11px; border-radius:3px; background:var(--accent)}
.post-body blockquote{margin:var(--s10) 0; padding:var(--s2) 0 var(--s2) var(--s6);
  border-left:4px solid var(--accent); font-size:23px; line-height:1.4; font-weight:600; color:var(--on-paper)}
.video-embed{margin:var(--s8) 0 var(--s6); border-radius:14px; overflow:hidden; box-shadow:0 24px 60px rgba(10,12,11,.18)}
.video-embed iframe{display:block; width:100%; aspect-ratio:16/9; border:0}
.yt-facade{display:block; width:100%; aspect-ratio:16/9; padding:0; margin:0; border:0; cursor:pointer; position:relative; background:#000; overflow:hidden}
.yt-facade img{width:100%; height:100%; object-fit:cover; display:block; opacity:.92; transition:opacity .2s ease}
.yt-facade:hover img{opacity:1}
.yt-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:68px; height:48px; border-radius:14px; background:rgba(0,0,0,.65); transition:background-color .2s ease}
.yt-play::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-46%,-50%); border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent #fff}
.yt-facade:hover .yt-play{background:#f00}
.post-cta{margin-top:var(--s16); padding:var(--s10); background:var(--paper-2); border-radius:16px; text-align:center}
.post-cta p{font-size:18px; color:var(--on-paper); margin-bottom:var(--s6)}

/* footer */
footer{background:var(--ink); padding:var(--s16) 0}
footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s4)}
footer .brand{font-size:16px}
footer .credits{color:var(--on-dark-mut); font-size:13px; line-height:1.7; text-align:right}
footer .credits a{color:var(--on-dark-mut); text-decoration:underline; text-underline-offset:2px}
footer .credits a:hover{color:var(--accent)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}
@media(max-width:600px){
  footer .wrap{flex-direction:column; align-items:flex-start}
  footer .credits{text-align:left}
}