.blog-container { max-width:var(--container); margin-inline:auto; width:calc(100% - 2 * var(--gutter)); }
.blog-hero { display:grid; grid-template-columns:minmax(0,1fr) 15rem; gap:3rem; align-items:center; padding-block:4.5rem; border-bottom:1px solid var(--color-border); }
.blog-hero h1 { max-width:15ch; font-size:clamp(2.8rem,5.7vw,5rem); letter-spacing:-.04em; line-height:1.08; }
.blog-hero h1 em { color:var(--color-accent); font-weight:500; }
.blog-hero__intro { max-width:38rem; margin-top:1.25rem; color:var(--color-text-muted); font-size:var(--step-1); }
.blog-stamp { display:grid; justify-items:center; gap:1rem; padding:2rem; border:1px solid var(--color-secondary); border-radius:50% 50% var(--radius-m) var(--radius-m); text-align:center; background:var(--color-tint); }
.blog-stamp svg { width:4.5rem; height:4.5rem; color:var(--color-accent); }.blog-stamp p { font-family:var(--font-serif); font-size:1.25rem; line-height:1.3; }.blog-stamp span { font-size:.65rem; text-transform:uppercase; letter-spacing:.12em; color:var(--color-text-muted); }
.blog-section { padding-block:3.5rem; }.blog-section+.blog-section { border-top:1px solid var(--color-border); }.blog-section .section-head p:not(.eyebrow) { color:var(--color-text-muted); font-size:.9rem; }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }.blog-grid--related { grid-template-columns:repeat(2,minmax(0,1fr)); }
.blog-card { min-width:0; display:flex; flex-direction:column; height:100%; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-l); background:var(--color-surface); transition:box-shadow var(--duration) var(--ease); }.blog-card:is(:hover,:focus-within) { box-shadow:var(--shadow-m); }
.blog-card__image { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--color-tint); }.blog-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }.blog-card:hover .blog-card__image img { transform:scale(1.035); }.blog-card__image .badge { position:absolute; top:1rem; left:1rem; }
.blog-card__body { flex:1; display:flex; flex-direction:column; align-items:start; gap:.8rem; padding:1.4rem; }.blog-category { color:var(--color-accent-dark); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; text-decoration-color:transparent; }.blog-category:hover { text-decoration-color:currentColor; }
.blog-card h3 { font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.2; }.blog-card h3 a { color:var(--color-text); text-decoration:none; }.blog-card h3 a:hover { color:var(--color-accent-dark); text-decoration:none; }
.blog-card__excerpt { color:var(--color-text-muted); font-size:.9rem; }.blog-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; color:var(--color-text-muted); font-size:.75rem; }.blog-card .blog-meta { margin-top:auto; padding-top:.5rem; }.blog-card .link-arrow { font-size:.85rem; }
.blog-tools { margin-bottom:1.5rem; padding:1.5rem; border:1px solid var(--color-border); border-radius:var(--radius-l); background:var(--color-tint); }.blog-search-wrap { position:relative; max-width:38rem; }.blog-search-wrap .icon { top:50%; }.blog-tools .search>.icon { top:auto; }.blog-search-wrap .input { padding-left:2.85rem; }.blog-chips { margin-top:1rem; padding-bottom:.5rem; }.blog-tools .field-label { font-size:.85rem; }.blog-filter-hint { margin-top:.4rem; font-size:.75rem; color:var(--color-text-muted); }
.blog-not-found { margin-block:4rem; }.blog-noscript { margin-top:1rem; color:var(--color-text-muted); font-size:.85rem; }
.blog-article__head { max-width:55rem; padding-block:3.5rem 2.5rem; }.blog-article__head h1 { margin-top:1rem; font-size:clamp(2.4rem,4.8vw,4.5rem); letter-spacing:-.035em; }.blog-article__intro { max-width:44rem; margin-top:1.25rem; font-size:var(--step-1); color:var(--color-text-muted); }.blog-article__head .blog-meta { margin-top:1.5rem; font-size:.85rem; }
.blog-article__cover { overflow:hidden; border-radius:var(--radius-xl); aspect-ratio:2/1; background:var(--color-tint); }.blog-article__cover img { width:100%; height:100%; object-fit:cover; }
.blog-reading-layout { display:grid; grid-template-columns:15rem minmax(0,44rem); gap:clamp(2rem,5vw,5rem); padding-block:3rem 1rem; justify-content:space-between; }
.blog-contents { position:sticky; top:7rem; align-self:start; }.blog-contents nav { display:grid; margin-top:.5rem; }.blog-contents nav a { padding:.7rem 0; border-bottom:1px solid var(--color-border); color:var(--color-text-muted); text-decoration:none; font-size:.85rem; }.blog-contents nav a:hover { color:var(--color-accent-dark); }.blog-contents>.link-arrow { margin-top:1.5rem; font-size:.8rem; }
.blog-prose { min-width:0; }.blog-prose__lead { font-size:var(--step-1); }.blog-prose section { margin-top:2.5rem; scroll-margin-top:7rem; }.blog-prose h2 { margin-bottom:1rem; font-size:var(--step-2); }.blog-prose p { line-height:1.8; }.blog-prose p+p { margin-top:1rem; }.blog-prose section p { color:var(--color-text-muted); }.blog-article__signoff { display:flex; align-items:center; gap:1rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--color-border); font-size:.85rem; color:var(--color-text-muted); }.blog-article__signoff strong { color:var(--color-text); }
@media(max-width:991px) { .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.blog-hero { grid-template-columns:minmax(0,1fr) 12rem; gap:2rem; }.blog-stamp { padding:1.5rem; }.blog-reading-layout { grid-template-columns:12rem minmax(0,1fr); gap:2rem; } }
@media(max-width:599px) { .blog-hero { grid-template-columns:1fr; padding-block:3rem; }.blog-stamp { display:none; }.blog-hero h1 { font-size:clamp(2.7rem,10vw,3.5rem); }.blog-section { padding-block:2.5rem; }.blog-grid,.blog-grid--related { grid-template-columns:1fr; }.blog-tools { padding:1rem; }.blog-reading-layout { grid-template-columns:1fr; }.blog-contents { position:static; }.blog-contents nav { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }.blog-contents nav a { font-size:.8rem; }.blog-article__cover { aspect-ratio:4/3; }.blog-article__head { padding-top:2.5rem; } }

/* Journal search: native-feeling autocomplete with the bakery's own palette. */
.blog-tools { display:grid; grid-template-columns:minmax(16rem,18rem) minmax(0,1fr); align-items:end; gap:.75rem 1.25rem; }
.blog-tools .blog-chips { min-width:0; margin:0; padding:0; align-self:end; min-height:3.5rem; align-items:center; flex-wrap:wrap; overflow:visible; }
.blog-tools .blog-chips .chip { padding-inline:.85rem; }
.blog-filter-hint { grid-column:1 / -1; margin-top:0; }
@media(max-width:991px) { .blog-tools { grid-template-columns:minmax(15rem,1fr) minmax(0,2fr); align-items:center; }.blog-tools .blog-chips { align-self:center; } }
@media(max-width:767px) { .blog-tools { grid-template-columns:minmax(0,1fr); gap:1rem; } }
.blog-search-form { position:relative; isolation:isolate; z-index:2; }
.blog-search-form .field-label { margin-bottom:.65rem; font-size:1rem; }
.blog-search-control { display:flex; align-items:center; gap:.3rem; padding:.3rem; border:2px solid var(--color-primary); border-radius:var(--radius-pill); background:var(--color-surface); transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.blog-search-control:hover { border-color:var(--color-primary-dark); }
.blog-search-control:focus-within { outline:3px solid var(--color-focus); outline-offset:3px; box-shadow:var(--shadow-s); }
.blog-search-control .input { flex:1; min-width:0; min-height:2.75rem; padding:.55rem 1rem; border:0; background:transparent; box-shadow:none; font-size:1rem; }
.blog-search-control .input:focus-visible { outline:none; }
.blog-search-control .input::-webkit-search-cancel-button { appearance:none; }
.blog-search-submit,.blog-search-clear { display:inline-grid; place-items:center; flex:none; width:2.75rem; height:2.75rem; border:0; border-radius:50%; }
.blog-search-submit { background:var(--color-primary); color:#fff; }
.blog-search-submit:hover { background:var(--color-primary-dark); }
.blog-search-clear { background:transparent; color:var(--color-text-muted); font-size:1.6rem; }
.blog-search-clear:hover { background:var(--color-tint); color:var(--color-text); }
.blog-search-panel { position:absolute; top:calc(100% + .6rem); left:0; right:0; overflow:hidden; padding:.65rem; border:1px solid var(--color-border); border-radius:var(--radius-l); background:var(--color-surface); box-shadow:var(--shadow-m); }
.blog-search-panel-head { display:flex; justify-content:space-between; gap:.75rem; align-items:center; padding:.45rem .6rem .6rem; font-size:.75rem; color:var(--color-text-muted); }
.blog-search-panel-head p { font-weight:600; }
.blog-search-panel-head button { min-height:2rem; padding:.25rem; border:0; background:none; color:var(--color-primary); text-decoration:underline; text-underline-offset:.2em; font-size:.75rem; }
.blog-search-panel-head button:hover { color:var(--color-accent-dark); }
.blog-suggestions { margin:0; padding:0; list-style:none; max-height:min(22rem,45vh); overflow-y:auto; }
.blog-suggestions li { display:flex; gap:.8rem; align-items:center; min-height:3.5rem; padding:.65rem; border-radius:var(--radius-s); cursor:pointer; transition:background-color var(--duration) var(--ease); }
.blog-suggestions li:is(:hover,[aria-selected="true"]) { background:var(--color-tint); }
.blog-suggestions li>.icon { color:var(--color-accent); flex:none; }
.blog-suggestions li>span:not(.blog-suggestion-arrow) { flex:1; min-width:0; }
.blog-suggestion-label { display:block; font-size:.9rem; font-weight:500; line-height:1.4; }
.blog-suggestions small { display:block; margin-top:.2rem; color:var(--color-text-muted); font-size:.7rem; }
.blog-suggestion-arrow { color:var(--color-text-muted); font-size:1.1rem; }
.blog-search-key-hint,.blog-search-empty { padding:.5rem .6rem; color:var(--color-text-muted); font-size:.7rem; }
.blog-search-key-hint { border-top:1px solid var(--color-border); margin-top:.4rem; }
.blog-pagination { display:grid; justify-items:center; gap:1rem; margin-top:2.5rem; }
.blog-pagination p { color:var(--color-text-muted); font-size:.85rem; }
.blog-pagination .btn { min-width:12rem; }
.blog-noscript-more { margin-top:1.5rem; }
@media(max-width:599px) { .blog-search-control .input { padding-left:.7rem; font-size:1rem; }.blog-search-panel { padding:.4rem; }.blog-search-panel-head { align-items:start; }.blog-search-panel-head button { flex:none; }.blog-search-submit,.blog-search-clear { width:2.5rem; height:2.5rem; } }