/* Shared Lavarage blog theme — LIGHT, matching the marketing site (off-white
   background, dark text, amber+blue hero "cheeks"). Used by /blog/ and posts. */
@font-face { font-family:'Sohne'; src:url('/fonts/Sohne-Buch.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Sohne'; src:url('/fonts/Sohne-Kraftig.ttf') format('truetype'); font-weight:600; font-display:swap; }
:root{
  --bg:#faf9f9; --surface:#ffffff; --surface-2:#f4f2f0; --border:#e9e5e1; --border-strong:#d8d2cb;
  --text:#0c0a09; --body:#292524; --muted:#57534e; --faint:#a8a29e;
  --accent:#f56506; --accent-2:#ffaf1a; --blue:#2d62ff; --max:720px;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; position:relative; background:var(--bg); color:var(--body);
  font-family:'Sohne',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 24px}

/* hero "cheeks" — amber on the left, blue on the right, softly blurred */
.cheeks{ position:absolute; top:0; left:0; right:0; height:560px; overflow:hidden; z-index:0; pointer-events:none }
.cheeks::before,.cheeks::after{ content:''; position:absolute; border-radius:50%; filter:blur(120px) }
.cheeks::before{ width:40rem; height:40rem; top:-15rem; left:-13rem; background:var(--accent-2); opacity:.40 }
.cheeks::after{ width:34rem; height:34rem; top:-13rem; right:-14rem; background:var(--blue); opacity:.26 }
header,main,footer{ position:relative; z-index:1 }

/* nav — fixed, blurred, translucent light */
header{position:sticky; top:0; z-index:20; background:rgba(250,249,249,.65); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); border-bottom:1px solid var(--border)}
.nav{width:100%; max-width:var(--max); margin:0 auto; padding:15px 24px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; text-decoration:none}
.brand img{height:17px; display:block}
.nav-links{display:flex; gap:6px; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; padding:7px 12px; border-radius:8px; transition:color .15s,background .15s}
.nav-links a:hover{color:var(--text)}
.nav-links a.here{color:var(--text)}
.nav-links .cta{color:#fff; background:var(--text); box-shadow:inset 0 -1px #ffffff26, 0 1px 2px #0c0a0926}
.nav-links .cta:hover{background:#292524; color:#fff}

/* layout — footer pinned to bottom */
main{flex:1 0 auto; width:100%; padding:64px 0 80px}
footer{flex-shrink:0; border-top:1px solid var(--border); padding:28px 0}
footer .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--faint); font-size:13px}
footer .brand img{height:15px; opacity:.85}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--accent)}

/* index list */
.page-title{font-size:42px; font-weight:600; letter-spacing:-.025em; color:var(--text); margin:0 0 10px}
.page-sub{color:var(--muted); margin:0 0 40px; font-size:17px}
.posts{display:flex; flex-direction:column; gap:12px}
.card{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 28px; box-shadow:0 1px 2px #0c0a0908; transition:border-color .15s, box-shadow .2s, transform .15s}
.card:hover{border-color:var(--border-strong); box-shadow:0 10px 28px #0c0a0914; transform:translateY(-2px)}
.card h2{margin:0 0 8px; font-size:21px; font-weight:600; letter-spacing:-.01em; color:var(--text)}
.card p{margin:0; color:var(--muted); font-size:15px}
.card .date{display:block; margin-top:16px; font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.07em}

/* article */
.back{display:inline-flex; align-items:center; gap:7px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; margin-bottom:34px}
.back:hover{color:var(--accent)}
article{max-width:var(--max)}
article h1.title{font-size:40px; font-weight:600; letter-spacing:-.025em; color:var(--text); margin:0 0 12px; line-height:1.12}
.meta{color:var(--faint); font-size:13px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:40px}

/* rendered markdown */
.prose{font-size:17px; color:var(--body)}
.prose>:first-child{margin-top:0}
.prose h1,.prose h2,.prose h3,.prose h4{color:var(--text); font-weight:600; letter-spacing:-.015em; line-height:1.25; margin:1.9em 0 .6em}
.prose h1{font-size:30px} .prose h2{font-size:25px} .prose h3{font-size:20px}
.prose p{margin:0 0 1.15em}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.prose a:hover{color:#c44f04}
.prose strong{color:var(--text); font-weight:600}
.prose ul,.prose ol{margin:0 0 1.15em; padding-left:1.4em}
.prose li{margin:.4em 0}
.prose blockquote{margin:1.5em 0; padding:4px 22px; border-left:3px solid var(--accent); color:var(--muted); font-style:italic}
.prose code{background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:.12em .4em; font-size:.88em; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace}
.prose pre{background:#13100e; color:#e7e3df; border-radius:14px; padding:18px 20px; overflow:auto; margin:0 0 1.4em}
.prose pre code{background:none; border:0; padding:0; color:inherit}
.prose img{max-width:100%; height:auto; border-radius:14px; border:1px solid var(--border)}
.prose hr{border:0; border-top:1px solid var(--border); margin:2.4em 0}
.prose table{border-collapse:collapse; width:100%; margin:0 0 1.4em; font-size:15px}
.prose th,.prose td{border:1px solid var(--border); padding:9px 13px; text-align:left}
.prose th{background:var(--surface-2)}

.state{color:var(--muted); padding:70px 0; text-align:center; font-size:15px}

@media(max-width:600px){
  .page-title{font-size:32px} article h1.title{font-size:30px}
  main{padding:44px 0 64px}
  .cheeks{height:420px}
  .nav-links{gap:2px} .nav-links a{padding:7px 9px; font-size:13px}
  footer .wrap{flex-direction:column; gap:10px; text-align:center}
}

/* LAV-1774/SEO: author byline (avatar + name + date) on posts */
.meta{display:flex; align-items:center; gap:9px; text-transform:none; letter-spacing:0; font-size:14px}
.byline-av{width:30px; height:30px; border-radius:50%; object-fit:cover; background:var(--surface-2); border:1px solid var(--border); flex:0 0 auto}
.byline-name{color:var(--text); font-weight:600}
.byline-dot{opacity:.45}
.meta time{color:var(--faint)}