/* Hallmark · MissaciWeb editorial blog · IA and web design, shared brand system */
/* Clear reading measure, native category links, useful related content. */
:root{--blog-soft:color-mix(in srgb,var(--cyan) 9%,var(--surface));--blog-rule:var(--line);--blog-cover:var(--surface-2);--blog-day-signal:#1B3B99}
.blog-breadcrumb{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.8rem;margin-bottom:32px}.blog-breadcrumb a{text-decoration:none}.blog-breadcrumb a:hover{color:var(--cyan)}
.blog-intro h1{max-width:22ch}.blog-listing{padding-top:40px}.blog-tools{display:grid;gap:32px;margin-bottom:48px}.blog-filters{display:flex;flex-wrap:wrap;gap:12px}.blog-filters a,.blog-pagination a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:.85rem;text-decoration:none}.blog-filters a[aria-current],.blog-pagination a[aria-current]{color:var(--cyan);border-color:var(--cyan);background:var(--blog-soft)}
.blog-search{display:grid;grid-template-columns:minmax(0,1fr) auto;max-width:600px;gap:12px}.blog-search label{grid-column:1/-1;font-size:.85rem;color:var(--muted)}.blog-search input{min-width:0;min-height:48px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}.blog-search button,.blog-share button,.blog-share a{min-height:44px;border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 18px;background:transparent;color:var(--text);font:inherit;font-size:.85rem;text-decoration:none;cursor:pointer}.blog-search button:hover,.blog-share button:hover,.blog-share a:hover{border-color:var(--cyan);color:var(--cyan)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.blog-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-card);overflow:clip;background:var(--surface)}.blog-cover{display:block;aspect-ratio:1.45;overflow:clip;background:var(--blog-cover)}.blog-cover img{height:100%;width:100%;object-fit:cover;object-position:center;transition:transform 500ms var(--ease-out)}.blog-card:hover{border-color:var(--glass-line)}.blog-card-body{padding:28px;display:flex;flex:1;flex-direction:column}.blog-category{color:var(--cyan);font-size:.8rem;margin:0 0 12px}.blog-meta{display:flex;flex-wrap:wrap;gap:12px 24px;color:var(--muted);font-size:.76rem;margin:0 0 20px}.blog-card h2,.blog-card h3{font-size:1.3rem;line-height:1.4;max-width:none;margin-bottom:16px}.blog-card h2 a,.blog-card h3 a{text-decoration:none}.blog-card-body>p:not([class]){font-size:.92rem;color:var(--muted)}.blog-card .text-link{align-self:flex-start;margin-top:auto;font-size:.85rem}.blog-pagination{display:flex;justify-content:center;gap:12px;margin-top:48px}.blog-search-status{color:var(--muted);font-size:.9rem}.blog-search-status:empty{display:none}
.blog-resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.blog-resources a{padding:28px 0;border-top:1px solid var(--well-rule);text-decoration:none;display:flex;flex-direction:column;gap:24px;justify-content:space-between;font-family:var(--font-display);font-size:1.1rem}.blog-download{font-family:var(--font-body);font-size:.8rem;color:var(--blog-day-signal)}.blog-follow{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card)}.blog-follow h3{font-size:1.2rem}.blog-follow p{color:var(--muted);font-size:.88rem}.blog-follow .text-link{font-size:.84rem;margin-right:20px;margin-top:8px}.home-blog .section-head{align-items:end}
.article-heading{padding-top:160px;padding-bottom:48px}.article-heading h1{max-width:24ch;font-size:clamp(2.45rem,4.4vw,4.5rem)}.article-heading>.lead{max-width:62ch}.article-byline{display:flex;align-items:center;gap:16px;margin-top:32px;font-size:.85rem}.article-byline img{width:44px;height:44px;object-fit:cover;object-position:center 25%;border-radius:50%}.article-byline .blog-meta{margin:4px 0 0}.article-cover{margin:0 auto 64px}.article-cover>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:var(--radius-card)}.article-cover figcaption{font-size:.75rem;color:var(--muted);margin-top:12px}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:80px;align-items:start}.blog-article-content{max-width:72ch;min-width:0;font-size:1.08rem;line-height:1.85}.blog-article-content>p{color:var(--muted)}.blog-article-content>section{margin-top:52px;scroll-margin-top:120px}.blog-article-content h2{font-size:clamp(1.65rem,2.5vw,2.15rem);line-height:1.25;max-width:28ch;margin-bottom:24px}.blog-article-content section p,.blog-article-content li{color:var(--muted)}.blog-article-content li{margin-bottom:12px}.blog-article-content li::marker{color:var(--cyan)}.article-toc{margin-block:40px;padding:28px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface)}.article-toc h2{font-size:1.15rem;margin-bottom:20px}.article-toc ol{margin:0;padding-left:24px}.article-toc li{font-size:.94rem;margin-bottom:12px}.article-toc li:last-child{margin:0}.article-toc a{text-decoration:none}.article-toc a:hover{color:var(--cyan)}.article-takeaways{padding:28px;border:1px solid var(--glass-line);border-radius:var(--radius-card);background:var(--blog-soft)}.article-takeaways ul{margin-top:0}.article-sources{border-top:1px solid var(--line);padding-top:32px}.article-sources h2{font-size:1.25rem}.article-sources ul{padding-left:20px;font-size:.85rem}.article-sources p{font-size:.8rem}.article-sources a{overflow-wrap:anywhere;color:var(--cyan)}.blog-share{display:flex;flex-wrap:wrap;gap:12px}.blog-share [hidden]{display:none}.article-sharing h2{font-size:1.35rem}.share-status{font-size:.84rem;margin-top:16px;color:var(--muted)}
.article-sidebar{position:sticky;top:116px;display:grid;gap:32px}.author-box{border-top:1px solid var(--line);padding-top:24px}.author-box>img{width:80px;height:80px;object-fit:cover;object-position:center 25%;border-radius:50%;margin-bottom:24px}.author-box h2,.sidebar-related h2{font-size:1rem;color:var(--muted);font-weight:500}.author-box h3{font-size:1.25rem}.author-box p{font-size:.88rem;color:var(--muted)}.author-box .text-link{font-size:.85rem}.sidebar-related{border-top:1px solid var(--line);padding-top:24px}.sidebar-related>a{display:block;padding-block:16px;border-bottom:1px solid var(--line);text-decoration:none;font-size:.92rem;line-height:1.5}.sidebar-related>a:hover{color:var(--cyan)}.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:350;pointer-events:none}.reading-progress span{display:block;width:100%;height:100%;background:var(--cyan);transform-origin:left;scale:0 1}
@media(max-width:1100px){.blog-grid{gap:24px}.blog-card-body{padding:24px}.article-layout{grid-template-columns:minmax(0,1fr) 260px;gap:40px}}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-layout{grid-template-columns:minmax(0,1fr);gap:56px}.article-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.article-sidebar .blog-follow{grid-column:1/-1}.blog-article-content{max-width:100%}.blog-resources{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:minmax(0,1fr)}.blog-tools{gap:24px}.blog-listing{padding-top:24px}.blog-filters{gap:8px}.blog-filters a{padding-inline:12px;font-size:.78rem}.blog-search{gap:8px}.blog-search button{padding-inline:12px}.article-heading{padding-top:132px;padding-bottom:32px}.article-heading h1{font-size:2.35rem;max-width:20ch}.article-cover{margin-bottom:40px}.article-sidebar{grid-template-columns:minmax(0,1fr)}.blog-article-content{font-size:1.02rem}.article-toc,.article-takeaways{padding:24px}.blog-breadcrumb{gap:8px;font-size:.75rem;margin-bottom:24px}.home-blog .section-head .text-link{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.blog-card .blog-cover img,.blog-card:hover .blog-cover img{transform:none;transition:none}}
/* Compact tools keep articles visible near the first fold. */
@media(min-width:1001px){.blog-tools{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}.blog-search{width:400px;flex-shrink:0}.blog-filters{gap:12px}.blog-intro h1{font-size:clamp(2.8rem,4vw,3.75rem)}.blog-intro{padding-bottom:20px}}

/* No-script visitors retain the complete category navigation and article links. */
html:not(.js) .blog-search{display:none}

.blog-search input{border-color:var(--muted)}.blog-intro h1,.article-heading h1,.blog-card h2,.blog-card h3{text-wrap:balance}.blog-search-status,.share-status{font-variant-numeric:tabular-nums}

/* Editorial provenance remains secondary to the article, and pagination wraps on small screens. */
.article-ai-note{max-width:65ch;margin-top:16px;font-size:.78rem;line-height:1.6;color:var(--muted)}
.blog-pagination{flex-wrap:wrap}

/* High-end visual refinement: preserve the approved Dusk identity and editorial grid. */
.blog-card{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 7%,transparent)}
.blog-card:focus-within{border-color:var(--glass-line)}
.blog-search input::placeholder{color:var(--muted);opacity:1}
.article-toc a{display:block;min-height:44px;padding-block:8px}
.article-toc li{margin-bottom:4px}
@media(hover:hover) and (pointer:fine){.blog-filters a:hover,.blog-pagination a:hover{border-color:var(--glass-line);background:var(--blog-soft)}}
@media(prefers-reduced-motion:no-preference){.blog-card{transition:border-color 220ms var(--ease-out)}.blog-filters a,.blog-pagination a,.blog-search button,.blog-share button,.blog-share a{transition:color 180ms var(--ease-out),border-color 180ms var(--ease-out),background-color 180ms var(--ease-out)}}
@media(max-width:600px){.article-heading h1{font-size:clamp(2.05rem,8.5vw,2.35rem)}}