/* Deep Morning blog: shared styles for blog/index.html and every article (blog/<slug>/index.html).
   Tokens, buttons, header and footer follow landing-page/index-v3.html; keep them in step. */

/* ---------- tokens ---------- */
:root{
  --paper:#F7F1E8; --paper-2:#EFE5D6; --paper-3:#E8DCC8; --card:#FFFCF7;
  --ink:#1F1A17; --ink-2:#463D37; --muted:#776A61; --line:#E0D3BF; --line-2:#D2C2A9;
  --rust:#B4532A; --rust-d:#963F1C; --rust-l:#D9875C; --rust-soft:#F4E2D4;
  --night:#1C2033; --gold:#EDB97C; --ok:#3E7356;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r:14px;
  --shadow:0 1px 2px rgba(31,26,23,.05), 0 12px 32px -12px rgba(31,26,23,.18);
  --shadow-lg:0 2px 6px rgba(31,26,23,.06), 0 30px 60px -20px rgba(31,26,23,.35);
  --gutter:clamp(16px, 4vw, 32px);
  --sunrise:
    radial-gradient(circle at 50% 98%, #FFF3D6 0 11%, #FFD58F 22%, rgba(247,160,92,.65) 38%, rgba(247,160,92,0) 62%),
    linear-gradient(180deg, #1C2033 0%, #30294A 22%, #6E3753 45%, #B9523F 67%, #E88A4E 85%, #F5B66C 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--paper); color:var(--ink-2); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif); color:var(--ink); font-weight:500; margin:0; letter-spacing:-.015em}
p{margin:0}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 var(--gutter)}
.ic{width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
:focus-visible{outline:2.5px solid var(--rust); outline-offset:3px; border-radius:6px}
.kicker{font:500 12px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--rust); display:inline-flex; align-items:center; gap:10px}
.kicker::before{content:""; width:22px; height:1.5px; background:currentColor}

/* ---------- buttons ---------- */
.btn{
  --bg:linear-gradient(180deg, #C9643A 0%, #B4532A 55%, #A3471F 100%);
  --ring:inset 0 1px 0 rgba(255,232,206,.38), inset 0 -1px 0 rgba(90,30,8,.22);
  --drop:0 1px 2px rgba(120,45,15,.22), 0 10px 24px -10px rgba(180,83,42,.75);
  --sheen:rgba(255,226,186,.38);
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:12px; text-decoration:none; cursor:pointer;
  background:var(--bg); color:#fff; border:0; border-radius:999px; padding:16px 28px;
  font:600 16px/1.2 var(--sans); white-space:nowrap; box-shadow:var(--ring), var(--drop);
  transition:transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg, transparent 32%, var(--sheen) 50%, transparent 68%); transform:translateX(-110%); transition:transform .75s cubic-bezier(.3,.7,.3,1)}
.btn:hover{--bg:linear-gradient(180deg, #D26D42 0%, #BC5A30 55%, #A94B23 100%); --drop:0 1px 2px rgba(120,45,15,.22), 0 16px 32px -12px rgba(180,83,42,.85); transform:translateY(-1px)}
.btn:hover::before{transform:translateX(110%)}
.btn .arrow{display:grid; place-items:center; flex:none; width:30px; height:30px; margin:-7px -16px -7px 0; border-radius:50%; background:rgba(255,255,255,.2)}
.btn .arrow .ic{width:16px; height:16px; transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.btn:hover .arrow .ic{transform:translateX(2px)}
.btn-ghost{--bg:var(--card); --sheen:rgba(237,185,124,.3); --ring:inset 0 0 0 1px var(--line-2), inset 0 1px 0 #fff; --drop:0 1px 2px rgba(31,26,23,.05), 0 8px 20px -14px rgba(31,26,23,.4); color:var(--ink)}
.btn-ghost:hover{--bg:#fff; --ring:inset 0 0 0 1px var(--rust-l), inset 0 1px 0 #fff; --drop:0 1px 2px rgba(31,26,23,.05), 0 14px 26px -14px rgba(180,83,42,.5); color:var(--rust-d)}
.btn-ghost .arrow{background:var(--rust-soft); color:var(--rust-d)}
.btn-light{--bg:linear-gradient(180deg, #FFFCF6 0%, #F4E8D6 100%); --sheen:rgba(237,185,124,.45); --ring:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(120,80,40,.12); --drop:0 12px 30px -10px rgba(0,0,0,.55); color:var(--ink)}
.btn-light:hover{--bg:linear-gradient(180deg, #FFFFFF 0%, #F8EDDD 100%); --drop:0 16px 36px -12px rgba(0,0,0,.6), 0 0 0 5px rgba(237,185,124,.16)}
.btn-light .arrow{background:linear-gradient(180deg, #C9643A, #A3471F); color:#fff}
.btn-outline-light{--bg:rgba(255,248,238,.07); --sheen:rgba(255,226,186,.18); --ring:inset 0 0 0 1px rgba(247,241,232,.32); --drop:0 10px 26px -14px rgba(0,0,0,.6); color:var(--paper)}
.btn-outline-light:hover{--bg:rgba(255,248,238,.14); --ring:inset 0 0 0 1px rgba(247,241,232,.7)}
.btn-sm{padding:12px 20px; font-size:15px}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background:rgba(247,241,232,.88); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:68px}
.brand-row{display:flex; align-items:center; gap:11px; min-width:0}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand-mark{width:28px; height:28px; flex:none; border-radius:50%; background:var(--sunrise); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 3px 10px -3px rgba(232,138,78,.7)}
.brand b{font:600 20px/1 var(--serif); letter-spacing:-.01em; white-space:nowrap}
.blog-label{font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--rust); padding-left:11px; border-left:1px solid var(--line-2); text-decoration:none}
a.blog-label:hover{color:var(--rust-d)}
.nav .btn{padding:11px 20px; font-size:14.5px}
.progress{position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--rust), var(--gold))}
@media (max-width: 420px){ .nav .btn{display:none} }

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:#B7AA9C; padding:40px 0 48px; font-size:14px}
.foot{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.site-footer .brand{color:#fff}
.site-footer p{margin-top:12px; line-height:1.6}
.site-footer a{color:#E6D9C8}
.foot-right{text-align:right}
.foot small{font:500 11px/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#8D8173; display:block; margin-top:14px}
@media (max-width: 760px){ .foot{grid-template-columns:1fr} .foot-right{text-align:left} }

/* ---------- blog index ---------- */
main{flex:1; position:relative}
.blog-main{overflow:hidden}
.sun{position:absolute; width:min(1000px, 160vw); aspect-ratio:1; left:50%; top:112%; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(237,185,124,.5) 0%, rgba(232,160,110,.24) 30%, rgba(247,241,232,0) 62%)}
.intro{position:relative; padding:clamp(64px, 10vw, 120px) 0 clamp(40px, 6vw, 64px); max-width:720px}
.intro h1{font-size:clamp(40px, 6vw, 68px); line-height:1.04; margin-top:16px}
.intro h1 em{font-style:italic; font-weight:400; color:var(--rust)}
.intro .lead{font-size:clamp(17px, 1.6vw, 19px); margin-top:20px; max-width:620px}
.soon{margin-top:36px; display:flex; gap:16px; align-items:flex-start; padding:20px 22px; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line), var(--shadow); max-width:620px}
.soon .dot{width:10px; height:10px; margin-top:8px; border-radius:50%; background:var(--rust); flex:none; box-shadow:0 0 0 5px var(--rust-soft)}
.soon b{display:block; color:var(--ink); font-weight:600}
.soon p{font-size:15.5px; margin-top:4px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
@media (max-width: 520px){ .actions .btn{width:100%} }
.posts{position:relative; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px; padding-bottom:clamp(72px, 10vw, 120px)}
.posts:empty{display:none}
.post-card{display:flex; flex-direction:column; gap:10px; padding:24px; border-radius:18px; background:var(--card); text-decoration:none; box-shadow:inset 0 0 0 1px var(--line), 0 1px 2px rgba(31,26,23,.04); transition:transform .2s, box-shadow .2s}
.post-card:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow-lg)}
.post-card .topic{font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--rust)}
.post-card h2{font-size:24px; line-height:1.2}
.post-card p{font-size:15.5px; line-height:1.55}
.post-card .meta{margin-top:auto; padding-top:10px; display:flex; justify-content:space-between; align-items:center; font:500 11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.post-card .meta .ic{width:16px; height:16px; color:var(--rust); transition:transform .25s}
.post-card:hover .meta .ic{transform:translateX(3px)}

/* ---------- article ---------- */
.post{display:grid; grid-template-columns:210px minmax(0, 700px); column-gap:64px; justify-content:center; padding:clamp(28px, 5vw, 48px) 0 clamp(56px, 8vw, 96px)}
.post-head,.post-body{grid-column:2}
.toc-wrap{grid-column:1; grid-row:2}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; font:500 12px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.crumbs li + li::before{content:"/"; margin-right:6px; color:var(--line-2)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--rust)}
.post-head{padding-bottom:28px; margin-bottom:36px; border-bottom:1px solid var(--line)}
.post-head .kicker{margin-top:28px}
.post-head h1{font-size:clamp(36px, 5.2vw, 56px); line-height:1.06; margin-top:14px; text-wrap:balance}
.dek{font-size:clamp(18px, 1.8vw, 20px); line-height:1.55; margin-top:18px; color:var(--ink-2)}
.byline{display:flex; align-items:center; gap:12px; margin-top:26px}
.avatar{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--sunrise); color:#fff; font:500 19px/1 var(--serif); text-shadow:0 1px 6px rgba(28,32,51,.45); box-shadow:0 0 0 3px var(--card), 0 0 0 4px var(--line)}
.byline b{display:block; color:var(--ink); font-weight:600; font-size:15px}
.byline small{display:block; font:500 11.5px/1.4 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:2px}

.toc{position:sticky; top:96px; font-size:14px}
.toc b{display:block; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:2px; border-left:1px solid var(--line)}
.toc a{display:block; padding:6px 0 6px 14px; margin-left:-1px; border-left:2px solid transparent; text-decoration:none; color:var(--ink-2); line-height:1.35; transition:color .15s, border-color .15s}
.toc a:hover{color:var(--rust)}
.toc a.on{color:var(--rust); border-left-color:var(--rust); font-weight:600}
.toc-wrap:has(ol:empty){display:none}

.answer{padding:20px 22px; border-radius:16px; background:var(--card); box-shadow:inset 3px 0 0 var(--rust), inset 0 0 0 1px var(--line), var(--shadow); margin-bottom:36px}
.answer .kicker{margin-bottom:10px}
.answer p{font:400 18px/1.6 var(--serif); color:var(--ink)}

.prose{font:400 19px/1.72 var(--serif); color:#2E2723}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(28px, 3.4vw, 34px); line-height:1.15; margin-top:1.9em; scroll-margin-top:90px}
.prose h3{font:600 19px/1.35 var(--sans); color:var(--ink); margin-top:1.6em; letter-spacing:-.005em; scroll-margin-top:90px}
.prose h2 + *, .prose h3 + *{margin-top:.6em}
.prose a:not(.btn){color:var(--rust); text-decoration-thickness:1px; text-underline-offset:3px}
.prose a:not(.btn):hover{color:var(--rust-d)}
.prose strong{color:var(--ink); font-weight:600}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose ul li::marker{color:var(--rust)}
.prose ol li::marker{font:600 .85em var(--mono); color:var(--rust)}
.prose blockquote{margin:1.6em 0; padding:4px 0 4px 22px; border-left:3px solid var(--rust); font-style:italic; color:var(--ink)}
.prose figure{margin:1.8em 0}
.prose figure img{border-radius:12px; box-shadow:var(--shadow-lg); background:#fff}
.prose figcaption{margin-top:12px; font:500 12px/1.5 var(--mono); letter-spacing:.04em; color:var(--muted)}
.prose hr{border:0; border-top:1px solid var(--line); margin:2.2em 0}
.table-wrap{overflow-x:auto; border-radius:14px; box-shadow:inset 0 0 0 1px var(--line); background:var(--card)}
.prose table{width:100%; border-collapse:collapse; font:400 15.5px/1.5 var(--sans)}
.prose th{font:600 11.5px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:left; background:var(--paper-2)}
.prose th,.prose td{padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.prose tr:last-child td{border-bottom:0}
.note{display:flex; gap:14px; padding:18px 20px; border-radius:14px; background:var(--rust-soft); font:400 16px/1.6 var(--sans); color:var(--ink-2)}
.note .ic{color:var(--rust); margin-top:3px}
.note b{color:var(--ink)}

.inline-cta{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; margin:2.2em 0 !important; padding:20px 22px; border-radius:18px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line), var(--shadow); font:400 16px/1.55 var(--sans)}
.inline-cta .brand-mark{width:40px; height:40px}
.inline-cta b{display:block; font:600 16px/1.35 var(--sans); color:var(--ink)}
.inline-cta p{font-size:15px; color:var(--ink-2); margin-top:2px}
@media (max-width: 640px){ .inline-cta{grid-template-columns:auto 1fr} .inline-cta .btn{grid-column:1 / -1; width:100%} }

.qa + .qa{margin-top:1.4em}
.qa h3{margin-top:0}
.sources{margin-top:2.4em; padding-top:1.4em; border-top:1px solid var(--line)}
.sources h2{font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0}
.sources ol{margin-top:14px; padding-left:1.3em; font:400 14px/1.55 var(--sans); color:var(--muted)}
.sources a{color:var(--ink-2); word-break:break-word}

.author-box{display:flex; gap:18px; align-items:flex-start; margin-top:48px; padding:24px; border-radius:18px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line)}
.author-box .avatar{width:56px; height:56px; font-size:24px}
.author-box b{display:block; color:var(--ink); font-weight:600}
.author-box small{display:block; font:500 11.5px/1.4 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.author-box p{font-size:15.5px; line-height:1.6; margin-top:10px}

.post-cta{position:relative; overflow:hidden; border-radius:24px; padding:clamp(36px, 6vw, 64px) clamp(22px, 5vw, 56px); background:var(--night); color:#EDE4D7; text-align:center; margin-bottom:clamp(48px, 7vw, 80px)}
.post-cta::before{content:""; position:absolute; left:50%; top:125%; width:min(900px, 180vw); aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,196,130,.75) 0%, rgba(240,150,90,.35) 28%, rgba(169,85,46,0) 60%); pointer-events:none}
.post-cta > *{position:relative}
.post-cta .kicker{color:var(--gold)}
.post-cta h2{color:#fff; font-size:clamp(32px, 4.4vw, 48px); line-height:1.08; margin-top:14px}
.post-cta h2 em{font-style:italic; font-weight:400; color:var(--gold)}
.post-cta p{margin:14px auto 0; max-width:520px; color:#D8CCBD}
.post-cta .actions{justify-content:center}

.related{padding-bottom:clamp(64px, 9vw, 112px)}
.related > h2{font-size:clamp(26px, 3vw, 32px); margin-bottom:22px}
.related .posts{padding-bottom:0}

@media (max-width: 1100px){
  .post{grid-template-columns:minmax(0, 700px)}
  .post-head,.post-body,.toc-wrap{grid-column:1; grid-row:auto}
  .toc{position:static; padding:18px 20px; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); margin-bottom:32px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}