/* GENERATED copy source for /assets/blog.css (oof.blog build). Blog-only rules, so honk.css stays untouched.
   Base rules ported from the 12.10 staging branch (blog-staging 28282b2); tldr/faq/hero/quiz/checklist added 20.10. */

.post{padding:10px 0 60px;overflow-x:clip}
.crumbs{font-size:15px;margin-bottom:14px;color:var(--ink-soft)}
.crumbs a{color:inherit}
.post .sheet{background:var(--paper);border-radius:8px;padding:clamp(22px,4vw,52px);max-width:820px}
.post-head h1,.blog-h1{font-size:clamp(34px,4.8vw,58px);margin-bottom:10px}
.byline{font-family:var(--typed);font-size:15px;color:var(--ink-soft);margin-bottom:26px}
.memo-inline{transform:rotate(-.8deg);max-width:560px;margin:0 0 34px;justify-self:start}
.memo-inline .lh img{width:56px}
.memo-inline p{padding-right:110px}
@media (max-width:560px){.memo-inline p{padding-right:0;padding-bottom:40px}.memo-inline .stamp{right:auto;left:22px;bottom:14px}}
.prose h2{font-size:clamp(24px,2.8vw,32px);margin:38px 0 12px}
.prose p,.prose li{font-size:18px;max-width:66ch}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 16px 24px}
.prose li{margin-bottom:6px}
.prose a:not(.btn):not(.mini){font-weight:600}
.prose .check{list-style:none;margin-left:0}
.prose .check li{position:relative;padding-left:34px}
.prose .check li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:20px;border:2px solid var(--navy);border-radius:4px;
  background:linear-gradient(45deg,transparent 44%,var(--orange) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--orange) 44% 56%,transparent 56%)}
.typed{font-family:var(--typed);font-size:16px;background:var(--shell);border-left:4px solid var(--sage);border-radius:6px;padding:16px 20px;margin:0 0 16px;max-width:62ch}
.typed p{font-size:16px;margin-bottom:8px}
.product{display:grid;gap:18px;background:var(--shell);border-radius:12px;padding:16px;margin:8px 0 18px}
@media (min-width:700px){.product{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}}
.product img{border-radius:8px;width:100%}
.product figcaption{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.product figcaption strong{font-family:var(--round);font-size:24px;line-height:1.1}
.product figcaption span{font-size:16px;color:var(--ink-soft)}
.minis{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:8px 0 18px}
.mini{display:flex;flex-direction:column;gap:6px;background:var(--shell);border-radius:10px;padding:12px;text-decoration:none}
.mini img{border-radius:6px;width:100%}
.mini strong{font-family:var(--round);font-size:19px;margin-top:4px}
.mini span{font-size:15px;color:var(--ink-soft)}
.mini:hover strong{text-decoration:underline}
.prose details{border-top:1px solid var(--line);padding:12px 0;max-width:66ch}
.prose details:last-child{border-bottom:1px solid var(--line)}
.prose summary{font-weight:700;cursor:pointer}
.prose details p{margin:8px 0 0}
.more{max-width:820px;margin-top:34px}
.more h2{font-size:28px}
.more ul{margin:0 0 18px 22px}
.more li{margin-bottom:6px}
.post-list{list-style:none;display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:720px){.post-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.post-list{grid-template-columns:repeat(3,1fr)}}
.post-card a{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--paper);border-radius:10px;padding:14px 14px 18px;text-decoration:none;box-shadow:4px 6px 0 rgba(30,42,56,.10)}
.post-card img{border-radius:6px;aspect-ratio:1;object-fit:cover;width:100%}
.post-card .re{font-family:var(--typed);font-size:14px;color:var(--ink-soft)}
.post-card h2{font-size:24px;margin:0}
.post-card p{font-size:16px}
.post-card time{margin-top:auto;font-size:14px;color:var(--ink-soft)}
.post-card a:hover h2{text-decoration:underline}
.tldr{background:var(--shell);border-left:6px solid var(--orange);border-radius:8px;padding:16px 20px 10px;margin:0 0 26px;max-width:66ch}
.tldr-h{font-family:var(--typed);font-weight:700;font-size:15px;letter-spacing:.08em;margin-bottom:6px}
.tldr ul{margin:0 0 6px 20px}
.tldr li{font-size:17px;margin-bottom:6px}
.hero{margin:0 0 28px}
.hero img,.prose picture img{border-radius:10px;width:100%;height:auto;display:block}
.prose figure{margin:8px 0 22px}
.prose figure figcaption{font-size:15px;color:var(--ink-soft);margin-top:6px}
.prose h3{font-size:clamp(20px,2.2vw,24px);margin:26px 0 10px}
.prose ol{list-style:decimal}
.faq{margin-top:40px;max-width:66ch}
.faq h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:10px}
.faq details{border-top:1px solid var(--line);padding:12px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-weight:700;cursor:pointer;font-size:18px}
.faq details p{margin:8px 0 0;font-size:17px}
.ix{background:var(--shell);border-radius:12px;padding:20px;margin:30px 0;max-width:66ch;border:2px dashed var(--line)}
.ix h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:6px}
.ix .ix-intro{font-size:16px;color:var(--ink-soft);margin-bottom:12px}
.ix fieldset{border:0;margin:0 0 14px;padding:0}
.ix legend{font-weight:700;margin-bottom:8px;font-size:17px}
.ix label{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;background:var(--paper);margin-bottom:6px;cursor:pointer;font-size:16px}
.ix input{margin-top:4px;accent-color:var(--orange)}
.ix .ix-result{background:var(--paper);border-radius:10px;padding:16px;margin-top:12px;border-left:6px solid var(--sage)}
.ix .ix-result strong{font-family:var(--round);font-size:22px;display:block;margin-bottom:4px}
.ix .ix-progress{font-family:var(--typed);font-size:14px;color:var(--ink-soft)}
.ix .btn{margin-top:6px}