/* Contents navigation stays quieter than the article it belongs to. */
.page #quartz-body .article-toc{margin:24px 0 32px;padding:16px 20px;border:1px solid var(--card-rule);border-left:3px solid var(--card-blue);background:color-mix(in srgb,var(--card-blue) 3%,var(--card-paper))}
.page #quartz-body .article-toc>summary{cursor:pointer;font:500 14px/1.6 Inter,Arial,sans-serif}
.page #quartz-body .article-toc nav>ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:4px 24px;counter-reset:contents;list-style:none;margin:14px 0 0;padding:0}
.page #quartz-body .article-toc li{display:flex;align-items:baseline;gap:10px;margin:0;min-width:0;counter-increment:contents}
.page #quartz-body .article-toc li::before{content:counter(contents,decimal-leading-zero);flex:none;color:var(--reading-muted);font:11px/1.6 monospace}
.page #quartz-body .article-toc nav a{display:inline-block;padding:5px 0;color:var(--reading-ink);font:400 16px/1.6 Inter,Arial,sans-serif;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.page #quartz-body .article-toc .toc-subheading{padding-left:14px}
.page #quartz-body .article-toc a:focus-visible{outline:2px solid var(--card-blue);outline-offset:3px}

/* Linked writing uses readable groups and compact cards instead of graph lines. */
.page #quartz-body :is(.blog-essay,.garden-note)>.connections{margin:32px 0 0;padding:20px;border:1px solid var(--card-rule);border-top:3px solid var(--card-blue);background:color-mix(in srgb,var(--card-blue) 3%,var(--card-paper))}
.page #quartz-body .connections>h2{display:table;margin:0 0 16px;padding:2px 6px;background:color-mix(in srgb,var(--card-blue) 24%,var(--card-paper));color:var(--reading-ink);font-size:16px;font-weight:600;line-height:1.5}
.page #quartz-body .connection-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin-top:0}
.page #quartz-body .connection-group{min-width:0;border:0;padding:0}
.page #quartz-body .connection-group>h3{margin:0 0 10px;color:var(--reading-muted);font-size:13px;font-weight:400;line-height:1.6}
.page #quartz-body .connection-group h3 small{font-size:inherit;opacity:1}
.page #quartz-body .connection-group .connection-node{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;min-height:0;padding:14px 16px;border:1px solid var(--card-rule);border-left:3px solid var(--connection-accent);border-radius:3px;background:var(--card-paper);color:var(--reading-ink);text-decoration:underline;text-underline-offset:4px;font:400 16px/1.6 Inter,Arial,sans-serif}
.page #quartz-body .connection-node::before{display:none}
.page #quartz-body .connection-title{overflow-wrap:anywhere}
.page #quartz-body .connection-action{flex:none;text-decoration:none}
.page #quartz-body .connection-node:is(:hover,:focus-visible){background:color-mix(in srgb,var(--connection-accent) 9%,var(--card-paper));border-color:var(--connection-accent)}
.page #quartz-body .connection-node:focus-visible{outline:2px solid var(--card-blue);outline-offset:3px}

/* Archive mastheads align to their existing canvas; the card grid is unchanged. */
@media(min-width:801px){body:is([data-slug="blog"],[data-slug="blog/index"],[data-slug="garden"],[data-slug="garden/index"]) .page>#quartz-body .sidebar.left :is(header.site-masthead,.site-archive){max-width:100%;margin-inline:0;padding-inline:28px}}
.page #quartz-body .center>.page-header:has(+.results-listing .topic-intro){padding-bottom:0;margin-bottom:0}
.page #quartz-body .page-header:has(+.results-listing .topic-intro) h1{margin-bottom:20px}
.page #quartz-body .results-listing>.topic-intro{margin:0 0 28px;line-height:1.7}

/* Stream footnotes retain reference/return links and readable secondary text. */
.stream-note .footnote-ref{font-size:.75em;line-height:0;vertical-align:super}
.stream-note .footnote-ref a{font-weight:500;text-decoration:underline;text-underline-offset:2px}
.stream-note .footnotes{margin:24px 0 0;padding:16px 18px;border:1px solid var(--edge);border-left:3px solid var(--blue);background:color-mix(in srgb,var(--blue) 4%,var(--paper));overflow-wrap:anywhere}
.stream-note .footnotes .footnotes-heading{margin:0 0 10px;font:500 12px/1.6 Inter,Arial,sans-serif;color:var(--reading-muted)}
.stream-note .footnotes ol{margin:0;padding-left:20px}
.stream-note .footnotes li{margin:8px 0;scroll-margin-top:80px}
.stream-note .footnotes :is(p,li){font:400 13px/1.7 Inter,Arial,sans-serif}
.stream-note .footnotes li>p{margin:0}
.stream-note .footnotes li>p+p{margin-top:8px}
.stream-note .footnote-backref{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;margin-left:4px;font-weight:400}
.stream-note .footnote-ref a:focus-visible,.stream-note .footnote-backref:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* A short editorial introduction leaves the photograph as the main event. */
body:has(.photo-intro) .photo-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 32px;max-width:none;margin:8px 0 28px;text-align:left}
.photo-intro .photo-heading .eyebrow{display:table;margin:0 0 8px;padding:2px 6px;background:#bde7f8;color:#161c1b;font:500 12px/1.6 Inter,Arial,sans-serif}
.photo-intro .photo-heading h1{margin:0 0 10px}
.photo-intro .photo-heading .lede{margin:0;font-size:17px;line-height:1.6}
.photo-intro .random-photo-actions{justify-content:flex-start;gap:16px;margin:0}
.photo-intro .random-photo-actions button{border:1px solid var(--edge);border-radius:3px;background:color-mix(in srgb,var(--blue) 10%,var(--paper));font:500 14px/1.5 Inter,Arial,sans-serif}
.photo-intro .random-photo-actions a{font-size:14px}
.photo-credit.photo-attribution{max-width:65ch;margin:20px auto 0;text-align:center;font:400 12px/1.6 Inter,Arial,sans-serif}
@media(max-width:700px){body:has(.photo-intro) .photo-intro{grid-template-columns:minmax(0,1fr);gap:18px}.page #quartz-body .article-toc nav>ul{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.page #quartz-body .article-toc,.page #quartz-body :is(.blog-essay,.garden-note)>.connections{padding:16px}.stream-note .footnotes{padding:14px}}
