/* u4 BLOG POST STANDARD: the shared stylesheet for every blog post on the u4 design system.
   Load after shared.css and u4.css:  <link rel="stylesheet" href="https://robcressy.com/css/u4-post.css?v=1">
   The post body stays plain HTML (p, h2, h3, ul, ol, blockquote, figure) plus the classic blog classes
   (tldr-box, blog-quote, blog-video, blog-figure, blog-img, blog-separator), so every publisher keeps
   writing the same body markup and this file does the styling. Bump ?v= on every post whenever it changes. */

/* ---------- reading progress ---------- */
.u4-post-progress{position:fixed;top:0;left:0;right:0;z-index:1001;height:3px;background:linear-gradient(90deg,#FBED20 0%,#FFC21F 45%,#FF8A1F 100%);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---------- hero ---------- */
.u4-post{padding-bottom:clamp(64px,8vw,104px)}
.u4-post-hero{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(44px,5vw,72px);border-bottom:1px solid var(--line)}
.u4-post-head{max-width:calc(900px + var(--gutter)*2);text-align:center}
.u4-post-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.72);transition:color .2s}
.u4-post-back:hover{color:var(--gold)}
.u4-post .blog-category{display:table;margin:0 auto 22px;padding:6px 14px;border:1px solid rgba(255,220,19,.4);border-radius:999px;background:rgba(255,220,19,.06);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.u4-post-title{margin:0 auto;max-width:22ch;font-family:var(--display);font-weight:800;font-size:clamp(2.25rem,1.1rem + 3.8vw,4.125rem);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.u4-post-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;margin-top:28px;font-size:.9375rem;color:rgba(255,255,255,.7)}
.u4-post-meta span+span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:12px;border-radius:50%;background:rgba(255,255,255,.35);vertical-align:middle}

/* ---------- layout: one reading column ---------- */
.u4-post-grid{display:grid;grid-template-columns:minmax(0,720px);justify-content:center;padding-top:clamp(40px,5vw,64px)}

/* ---------- the post body ---------- */
.u4-post-body{min-width:0;font-size:1.1875rem;line-height:1.75;color:rgba(255,255,255,.88)}
.u4-post-body>:first-child{margin-top:0}
.u4-post-body p{margin:0 0 1.3em}
.u4-post-body h2{margin:2.2em 0 .65em;font-weight:800;font-size:clamp(1.75rem,1.25rem + 1.6vw,2.375rem);line-height:1.12;letter-spacing:-.03em;color:var(--white);text-wrap:balance;scroll-margin-top:calc(var(--nav-height,72px) + 28px)}
.u4-post-body h3{margin:1.9em 0 .55em;font-weight:700;font-size:clamp(1.3125rem,1.15rem + .6vw,1.5625rem);line-height:1.25;letter-spacing:-.02em;color:var(--white);scroll-margin-top:calc(var(--nav-height,72px) + 28px)}
.u4-post-body h4{margin:1.6em 0 .5em;font-weight:700;font-size:1.1875rem;line-height:1.3;color:var(--white)}
.u4-post-body strong,.u4-post-body b{font-weight:600;color:var(--white)}
.u4-post-body em{font-style:italic}
.u4-post-body a{color:var(--white);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px;transition:color .2s}
.u4-post-body a:hover{color:var(--gold)}
.u4-post-body ul,.u4-post-body ol{margin:0 0 1.4em;padding-left:1.35em}
.u4-post-body ul{list-style:disc}
.u4-post-body ol{list-style:decimal}
.u4-post-body li{margin-bottom:.55em;padding-left:.2em}
.u4-post-body li::marker{color:var(--gold);font-weight:700}
.u4-post-body hr,.u4-post-body .blog-separator{height:1px;margin:3.25em 0;border:0;background:linear-gradient(90deg,rgba(255,220,19,0),rgba(255,220,19,.45),rgba(255,138,31,0))}
.u4-post-body hr+h2,.u4-post-body .blog-separator+h2{margin-top:0}
.u4-post-body img{max-width:100%;height:auto;border-radius:16px}
.u4-post-body code{padding:.12em .4em;border-radius:6px;border:1px solid var(--line-2);background:var(--card-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:var(--gold)}
.u4-post-body pre{margin:0 0 1.4em;padding:18px 20px;overflow:auto;border-radius:14px;border:1px solid var(--line-2);background:#0C0C0E;font-size:.875rem;line-height:1.6}
.u4-post-body pre code{padding:0;border:0;background:none;color:inherit}
.u4-post-body table{width:100%;margin:0 0 1.6em;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.u4-post-body th,.u4-post-body td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.u4-post-body th{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* TL;DR: the first thing an answer engine and a skimmer read */
.u4-post-body .tldr-box{position:relative;margin:0 0 2.2em;padding:26px 28px 24px;border-radius:20px;border:1px solid rgba(255,220,19,.28);background:radial-gradient(90% 120% at 0% 0%,rgba(255,176,32,.12),rgba(17,17,19,0) 60%),var(--card);overflow:hidden}
.u4-post-body .tldr-box::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.u4-post-body .tldr-label{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:4px 12px;border-radius:999px;background:var(--grad);color:var(--ink);font-family:var(--display);font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.u4-post-body .tldr-box ul{margin:0;padding-left:1.2em}
.u4-post-body .tldr-box li{font-size:1.0625rem;line-height:1.6;color:rgba(255,255,255,.9)}
.u4-post-body .tldr-box li:last-child{margin-bottom:0}

/* pull quote */
.u4-post-body .blog-quote,.u4-post-body blockquote{position:relative;margin:2.2em 0;padding:30px 30px 28px 30px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.u4-post-body .blog-quote::before,.u4-post-body blockquote::before{content:"\201C";position:absolute;top:-6px;left:22px;font-family:var(--display);font-weight:800;font-size:5.5rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.u4-post-body .blog-quote p,.u4-post-body blockquote p{position:relative;margin:24px 0 0;font-family:var(--display);font-weight:700;font-style:normal;font-size:clamp(1.375rem,1.15rem + .8vw,1.75rem);line-height:1.3;letter-spacing:-.02em;color:var(--white)}
.u4-post-body .blog-quote p+p,.u4-post-body blockquote p+p{margin-top:12px}

/* media */
.u4-post-body .blog-video{position:relative;height:0;margin:2.2em 0;padding-bottom:56.25%;overflow:hidden;border-radius:18px;border:1px solid var(--line-2);background:#0C0C0E;box-shadow:0 30px 80px -40px rgba(255,138,31,.45)}
.u4-post-body .blog-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.u4-post-body .blog-figure{margin:2.2em 0}
.u4-post-body .blog-img{display:block;width:100%;border:1px solid var(--line)}
.u4-post-body figcaption{margin-top:10px;font-size:.875rem;color:rgba(255,255,255,.65);text-align:center}

/* ---------- the locked Undeniable Studio close: compact ---------- */
.u4-post-close{padding-top:clamp(48px,6vw,72px)}
.u4-post-close .u4-wrap{max-width:calc(880px + var(--gutter)*2)}
.u4-post-close .u4-final{padding:clamp(34px,4vw,46px) clamp(20px,4vw,40px) clamp(36px,4vw,48px);border-radius:22px}
.u4-post-close .u4-kicker{justify-content:center;display:flex;margin:0 0 12px;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.u4-post-close .u4-h2{max-width:24ch;margin-inline:auto;font-size:clamp(1.75rem,1.05rem + 2vw,2.625rem);line-height:1.06}
.u4-post-close .u4-sub{margin:12px auto 0;max-width:56ch;font-size:1.0625rem;text-wrap:balance}
.u4-post-close .u4-ctas{margin-top:22px}
.u4-post-close .u4-btn{min-height:48px;padding:12px 22px}
.u4-post-foot{margin:16px 0 0;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ---------- author ---------- */
.u4-post-author{display:flex;align-items:center;gap:20px;max-width:720px;margin:clamp(28px,4vw,40px) auto 0;padding:24px 26px}
.u4-post-author img{flex:none;width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid rgba(255,220,19,.5)}
.u4-post-author-k{margin:0 0 2px;font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.u4-post-author-name{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.u4-post-author-bio{margin:0;font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.8)}
.u4-post-author-bio a{color:var(--gold)}

@media (max-width:760px){
  .u4-post-body{font-size:1.0625rem}
  .u4-post-body .tldr-box{padding:22px 20px 20px}
  .u4-post-body .blog-quote,.u4-post-body blockquote{padding:26px 22px 22px}
  .u4-post-author{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (prefers-reduced-motion:reduce){.u4-post-progress{display:none}}