/* kaisho · blog. Builds on work/assets/case.css (variables, list-hero, grid, card, cta, footer). */
.blog-ph{display:grid;place-items:center;width:100%;height:100%;font-size:clamp(90px,14vw,180px);color:var(--acc);background:radial-gradient(120% 90% at 30% 0%,rgba(var(--acc-rgb),.16),rgba(var(--fg-rgb),.03))}
.blog-empty{grid-column:1/-1;margin:0;opacity:.6;font-size:15px}
.card-info{flex-wrap:wrap}

.post{padding:clamp(120px,18vh,190px) var(--pad) clamp(40px,6vw,80px)}
.post-head{max-width:860px;margin:0 auto}
.post-head .back{margin-bottom:clamp(24px,4vw,40px);font-size:16px;font-weight:500;opacity:1;transition:color .25s ease,gap .3s ease}
.post-head h1{margin:18px 0 0;font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:500;font-size:clamp(36px,6.2vw,84px);line-height:1;letter-spacing:-.045em}
.post-lede{margin:clamp(20px,3vw,32px) 0 0;max-width:60ch;font-size:clamp(17px,1.5vw,20px);line-height:1.55;opacity:.7}
.post-hero{max-width:1200px;margin:clamp(32px,5vw,56px) auto 0;border-radius:clamp(16px,1.8vw,22px);overflow:hidden;border:1px solid rgba(var(--fg-rgb),.1)}
.post-hero img{width:100%;height:auto}
.post-body{max-width:760px;margin:clamp(36px,5vw,64px) auto 0;font-size:clamp(16px,1.25vw,18px);line-height:1.75;color:rgba(var(--fg-rgb),.86)}
.post-body>:first-child{margin-top:0}
.post-body p{margin:0 0 1.3em}
.post-body h2{margin:2.1em 0 .6em;font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:500;font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.035em;color:rgb(var(--fg-rgb))}
.post-body h3{margin:1.7em 0 .5em;font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:500;font-size:clamp(20px,2vw,25px);letter-spacing:-.025em;color:rgb(var(--fg-rgb))}
.post-body a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post-body a:hover{text-decoration-thickness:2px}
.post-body strong{color:rgb(var(--fg-rgb));font-weight:600}
.post-body ul,.post-body ol{margin:0 0 1.3em;padding-left:1.3em}
.post-body li{margin:.4em 0}
.post-body blockquote{margin:1.8em 0;padding:.2em 0 .2em 1.4em;border-left:2px solid var(--acc);font-family:'Instrument Serif',serif;font-style:italic;font-size:1.35em;line-height:1.4;color:rgb(var(--fg-rgb))}
.post-body blockquote p{margin:0}
.post-body img{border-radius:16px;margin:1.6em 0;height:auto}
/* newsletter sign-up under the blog title */
.top-side{max-width:380px;width:100%}
.news{margin-top:clamp(20px,3vw,28px)}
.news-label{display:block;margin-bottom:12px;font-size:15px;opacity:.7}
.news-row{display:flex;gap:10px}
.news-row input[type=email]{flex:1;min-width:0;padding:14px 20px;border-radius:999px;border:1px solid rgba(var(--fg-rgb),.18);background:rgba(var(--fg-rgb),.04);color:rgb(var(--fg-rgb));font:inherit;font-size:15px}
.news-row input[type=email]:focus{outline:none;border-color:var(--acc)}
.news-row button{padding:14px 24px;border-radius:999px;border:0;background:rgb(var(--fg-rgb));color:#0c0b0a;font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.news-row button:disabled{opacity:.6;cursor:default}
.news-hp{position:absolute;left:-9999px;width:0;height:0;opacity:0}
.news-msg{margin:10px 0 0;min-height:1.2em;font-size:14px;opacity:.75}
@media(max-width:520px){.news-row{flex-direction:column}}
.news-label{max-width:none}
.news{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(28px,4vw,48px);padding-top:clamp(20px,3vw,28px);border-top:1px solid rgba(var(--fg-rgb),.12)}
.news-label{margin:0;font-size:16px;white-space:nowrap}
.news-row{flex:1;min-width:260px}
.news-msg{flex-basis:100%;margin:0}
.list-hero .news{width:100%;max-width:none}.list-hero .news-row{flex:1 1 0}.list-hero .news-msg{max-width:none;min-height:0}

/* subscribe button: spinner while sending, drawn tick when done */
.news-row button{position:relative;min-width:128px;transition:background .3s,transform .2s}
.news-row button:active{transform:scale(.97)}
.news-row button .spin,.news-row button .tick{position:absolute;inset:0;margin:auto;opacity:0;transition:opacity .2s}
.news-row button .spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(12,11,10,.25);border-top-color:#0c0b0a}
.news-row button .tick{width:24px;height:24px;fill:none;stroke:#0c0b0a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.news-row button .lbl{transition:opacity .2s}
.news-row button.is-loading,.news-row button.is-done{opacity:1}
.news-row button.is-loading .lbl,.news-row button.is-done .lbl{opacity:0}
.news-row button.is-loading .spin{opacity:1;animation:news-spin .7s linear infinite}
.news-row button.is-done{background:var(--acc);animation:news-pop .45s ease}
.news-row button.is-done .tick{opacity:1;animation:news-draw .45s .1s ease forwards}
@keyframes news-spin{to{transform:rotate(360deg)}}
@keyframes news-draw{to{stroke-dashoffset:0}}
@keyframes news-pop{0%{transform:scale(.92)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.news-row button .spin{animation:none}.news-row button.is-done{animation:none}.news-row button.is-done .tick{animation:none;stroke-dashoffset:0}}

/* keyboard focus: visible ring on the newsletter field and button */
.news-row input[type=email]:focus-visible,.news-row button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* smoother subscribe: typed text fades out instead of snapping away, longer eased crossfades */
.news-row input[type=email]{transition:border-color .3s ease,color .45s ease,background .3s ease,opacity .45s ease}
.news-row input[type=email]::placeholder{transition:opacity .45s ease}
.news-form.is-clearing input[type=email],.is-clearing input[type=email]{color:transparent;opacity:.55}
.news-row button{transition:background .45s ease,transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.news-row button .spin,.news-row button .tick{transition:opacity .35s ease}
.news-row button .lbl{transition:opacity .35s ease}

.news-consent{flex-basis:100%;margin:0;font-size:12px;line-height:1.5;opacity:.55}
.news-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}