/* The established paper, ink, typeface and pixel artwork are inherited. */
.home-blog,.blog-main,.blog-related{padding-block:var(--section-space)}
.home-blog{border-top:1px solid var(--line)}
.blog-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:44px}
.blog-section-heading p{margin:12px 0 0;max-width:38em}
.blog-section-heading>.text-link{flex-shrink:0}
.blog-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--gap);align-items:end;margin-bottom:56px}
.blog-intro h1{font-size:clamp(30px,2.5vw,56px);max-width:15em;line-height:1.6}
.blog-intro>p{max-width:34em;margin:0}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,72px)}
.blog-card{min-width:0}
.blog-card[hidden],.blog-empty[hidden],.blog-tools[hidden]{display:none}
.blog-card-link{display:block;text-decoration:none;height:100%}
.blog-card-link h2,.blog-card-link h3{font-size:clamp(22px,1.3vw,30px);font-weight:600;line-height:1.65;margin:12px 0 16px;text-wrap:pretty}
.blog-card-link p{font-size:var(--body-size);line-height:1.9;margin:0 0 18px}
.blog-card-link:hover h2,.blog-card-link:hover h3{text-decoration:underline;text-underline-offset:.25em}
.blog-card-art{aspect-ratio:8/5;background:#fff;margin:0 0 24px;overflow:hidden;border-bottom:1px solid var(--line)}
.blog-card-art svg{height:100%;width:100%;object-fit:contain}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--small-size);color:var(--muted);line-height:1.6}
.post-meta span+span{border-left:1px solid var(--line);padding-left:18px}
.blog-tools{border-block:1px solid var(--line);padding:28px 0;margin-bottom:48px;display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:24px 44px}
.blog-search-field label,.blog-tools legend{display:block;font-size:var(--small-size);font-weight:600;margin:0 0 12px}
.blog-search-input{display:flex;gap:8px}
.blog-search-input input{font:inherit;min-width:0;width:100%;border:1px solid var(--line);background:#fff;color:var(--ink);padding:12px 14px;border-radius:2px}
.blog-search-input button{flex-shrink:0;border:1px solid var(--blue);background:var(--blue);color:white;border-radius:2px;padding:10px 16px;font-size:var(--small-size)}
.blog-tools fieldset{margin:0;padding:0;border:0;min-width:0}
.blog-filters{display:flex;flex-wrap:wrap;gap:8px}
.blog-filters label{position:relative;display:block;cursor:pointer}
.blog-filters input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}
.blog-filters span{display:block;padding:11px 14px;border:1px solid var(--line);border-radius:2px;font-size:var(--small-size)}
.blog-filters input:checked+span{background:var(--ink);border-color:var(--ink);color:white}
.blog-filters input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}
.blog-search-input input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.blog-results{grid-column:1/-1;display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:var(--small-size)}
.blog-results p{margin:0}
.blog-reset{padding:4px 0;background:none;border:0;color:var(--ink);text-decoration:underline}
.blog-empty{padding:32px 0}
.blog-article{padding-top:clamp(28px,3vw,64px)}
.blog-back{font-size:var(--small-size)}
.blog-article-heading{padding:40px 0 44px;max-width:1200px}
.blog-article-heading h1{font-size:clamp(32px,2.5vw,58px);margin:16px 0 18px;line-height:1.55}
.blog-article-heading .fiction-notice{margin-bottom:24px}
.blog-byline{font-size:var(--small-size);margin:0;color:var(--muted)}
.blog-article-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--gap);align-items:start}
.blog-hero-art{margin:0;position:sticky;top:32px;max-width:760px}
.blog-hero-art svg{width:100%;height:auto;max-height:78vh}
.blog-prose{min-width:0;max-width:var(--reading-width);margin-inline:auto}
.blog-prose p{line-height:2.05;margin-bottom:1.65em}
.blog-inline-art{width:min(100%,520px);margin:36px auto}
.blog-inline-art svg{width:100%}
.blog-source-link{padding-block:20px 48px}
.blog-memo-entry{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);border-top:1px solid var(--line);padding-block:64px}
.blog-memo-entry h2{font-size:clamp(26px,1.6vw,38px);max-width:18em}
.blog-related{border-top:1px solid var(--line)}
.blog-related>h2{margin-bottom:32px}
.blog-related>.text-link{display:inline-block;margin-top:40px}
.blog-related .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* One extra destination needs an earlier menu breakpoint. */
@media(min-width:1181px) and (max-width:1440px){
 .header-inner{min-height:88px;flex-wrap:wrap;padding:14px 0;gap:0 12px}
 .brand{flex:1}.menu-toggle{display:block;flex-shrink:0}
 .site-nav{display:none;flex-direction:column;align-items:stretch;flex-basis:100%;gap:0;margin-top:16px}
 .site-nav.open{display:flex}.site-nav a{font-size:16px;padding:12px 0;border-bottom:1px solid var(--line)}
 .site-nav .motion-toggle{align-self:flex-start;margin:12px 0 0}
}
@media(max-width:1100px){
 .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .blog-tools{grid-template-columns:1fr}.blog-intro{grid-template-columns:1fr;gap:24px}
 .blog-article-layout{grid-template-columns:1fr;gap:32px}
 .blog-hero-art{position:static;width:min(100%,560px);margin-inline:auto}
 .blog-hero-art svg{max-height:none}
 .blog-article-heading{max-width:var(--reading-width);margin-inline:auto}
 .blog-memo-entry{grid-template-columns:1fr;gap:28px}
}
@media(max-width:650px){
 .blog-grid,.blog-related .blog-grid{grid-template-columns:1fr;gap:44px}
 .blog-section-heading{display:block;margin-bottom:32px}
 .blog-section-heading>.text-link{display:inline-block;margin-top:18px}
 .blog-intro{margin-bottom:32px}.blog-intro h1{font-size:30px}
 .blog-tools{padding-block:22px;gap:24px;margin-bottom:36px}
 .blog-search-input input{font-size:16px;padding:12px 10px}
 .blog-search-input button{padding:10px 12px}
 .blog-filters{gap:8px}.blog-filters span{padding:10px 12px}
 .blog-results{flex-wrap:wrap;gap:8px 20px}
 .blog-article-heading{padding:28px 0}.blog-article-heading h1{font-size:30px}
 .blog-card-art{margin-bottom:20px}.blog-card-link h2,.blog-card-link h3{font-size:24px}
 .blog-memo-entry{padding-block:40px}.blog-byline{line-height:1.9}
}
@media print{.blog-tools,.blog-memo-entry,.blog-related{display:none}.blog-hero-art{position:static}.blog-article-layout{display:block}}