/* boconnell.org design stylesheet (boc-style.css)
   Cleaned version. Only functional change from the previous file: the inline-style
   "neutralizer" rule now EXEMPTS the documentation classes
   (:not(.boc-doc-mono):not(.boc-telex):not(.boc-courier)), so those blocks no longer need
   any !important override to keep their font. Everything else is unchanged.
   NOTE: reproduced from the live stylesheet, so property formatting is normalized and any
   old inline comments are not preserved — behaviour is identical. Keep a backup of the
   previous file before replacing. */

:root { --ink: #111; --paper: #fff; --rule: #111; --faint: #bbb; --mut: #666; --accent: #1e5c85; --l: 24px; --m: 13px; --s: 11px; --mono: "Noto Sans Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; --serif: "Sorts Mill Goudy",Georgia,"Times New Roman",serif; --gap: 24px; --pad: 28px; --max: 980px; --measure: 64ch; }
html, body { margin: 0px; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: var(--m); line-height: 1.7; text-size-adjust: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong, b { font-weight: 700; }
em, i, cite { font-style: italic; }
.wrap { max-width: var(--max); margin: 0px auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); padding: 6px 10px; z-index: 10; }
header.site { position: sticky; top: 0px; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--rule); }
@media screen and (min-width: 783px) {
  body.admin-bar header.site { top: 32px; }
}
@media screen and (max-width: 782px) {
  body.admin-bar header.site { top: 46px; }
}
header.site .row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0px; gap: 16px; }
header.site .name { font-family: var(--serif); font-weight: 400; font-size: var(--l); white-space: nowrap; }
nav.menu ul { list-style: none; margin: 0px; padding: 0px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
nav.menu li { margin: 0px; }
.menu-toggle { display: none; font-family: var(--mono); font-size: var(--m); background: none; border: 1px solid var(--rule); padding: 2px 8px; cursor: pointer; }
footer.site { border-top: 1px solid var(--rule); margin-top: 56px; }
footer.site .row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0px; gap: 16px; flex-wrap: wrap; font-size: var(--s); color: var(--mut); }
footer.site nav ul { list-style: none; margin: 0px; padding: 0px; display: flex; gap: 16px; flex-wrap: wrap; }
main { padding: 40px 0px 0px; }
.crumb { font-size: var(--s); color: var(--mut); margin-bottom: 14px; }
h1, .boc-head h1, .boc-archive-head h1, h1.title { font-family: var(--serif); font-size: var(--l); font-weight: 400; line-height: 1.15; margin: 0px 0px 8px; }
h2, h3, h4, h5, h6 { font-size: var(--m); font-weight: 700; margin: 1.3em 0px 0.35em; }
.boc-meta, .meta, .boc-dim, small, figcaption, .lenshead, .facets { font-size: var(--s); }
.boc-meta, .meta, .lenshead { color: var(--mut); }
.boc-single { max-width: var(--max); }
.boc-essay, .boc-summary, .entry-content, .body { max-width: none; }
.entry-content p, .boc-essay p, .boc-summary p, .body p, .entry-content blockquote, .boc-essay blockquote, .boc-summary blockquote { max-width: var(--measure); }
.boc-essay p, .boc-summary p, .entry-content p, .body p { margin: 0px 0px 1.1em; }
blockquote { margin: 1.4em 2.4em; padding: 0px; border: 0px; }
@media (max-width: 600px) {
  blockquote { margin: 1.4em 1.2em; }
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .boc-essay h1, .boc-essay h2, .boc-essay h3, .boc-essay h4 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
.entry-content h2, .boc-essay h2 { font-size: 22px; margin: 1.3em 0px 0.3em; }
.entry-content h3, .boc-essay h3 { font-size: 17px; margin: 1.2em 0px 0.3em; }
blockquote, .boc-note { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--ink); }
blockquote p { font-family: var(--serif); }
.entry-content [style]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.boc-doc-mono):not(.boc-telex):not(.boc-courier), .boc-essay [style]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.boc-doc-mono):not(.boc-telex):not(.boc-courier) { font-family: var(--mono) !important; font-size: inherit !important; color: inherit !important; letter-spacing: normal !important; background-color: transparent !important; }
.boc-facets, .facets { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0px 0px 28px; }
.boc-facet .k, .facets .k, .boc-facet strong { font-weight: 700; }
.boc-comp { color: var(--mut); }
.boc-recipe { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 32px 0px; padding: 4px 0px 20px; max-width: 62ch; }
.boc-recipe .r-title { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.15; margin: 14px 0px 2px; }
.boc-recipe .r-sec { font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; font-size: var(--s); color: var(--mut); margin: 20px 0px 8px; }
.boc-recipe p { margin: 0px 0px 0.55em; }
.boc-recipe .ing { padding-left: 1.7em; text-indent: -1.7em; margin: 0px 0px 0.2em; }
.boc-recipe .ing b { font-weight: 700; }
.boc-recipe figure { margin: 14px 0px; }
.boc-recipe figure img { display: block; width: 100%; height: auto; }
.boc-catlist { margin: 26px 0px; }
.boc-catitem { padding: 0px 0px 22px; margin: 0px 0px 22px; border-bottom: 1px solid rgb(238, 238, 238); max-width: var(--measure); }
.boc-catitem:last-child { border-bottom: 0px; }
.boc-catitem-t { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.15; margin: 0px 0px 4px; }
.boc-catitem-cite { font-size: var(--s); color: var(--mut); margin: 0px 0px 6px; }
.boc-catitem-abs { margin: 0px 0px 8px; }
.boc-catitem-abs p { margin: 0px; }
.boc-catitem-meta { font-size: var(--s); color: var(--mut); margin: 0px; }
.boc-catitem-meta .k { color: var(--mut); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; margin-right: 3px; }
.boc-cite { font-size: var(--s); color: var(--mut); margin: 0.25em 0px 0px; max-width: var(--measure); }
.grid, .boc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--gap); margin: 28px 0px; }
.fig .ph { aspect-ratio: 4 / 3; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; color: var(--mut); }
figcaption { color: var(--mut); margin-top: 6px; line-height: 1.4; font-size: var(--s); }
.entry-content img { max-width: 100%; height: auto; }
.wp-block-video video { max-width: 100%; height: auto; }
html, body { overflow-x: clip; }
.alignwide { width: min(1180px, 96vw); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); margin: 28px 0px; align-items: start; }
.side { font-size: var(--s); color: var(--mut); border-top: 1px solid var(--rule); padding-top: 8px; }
.boc-splash { position: fixed; inset: 0px; z-index: 1; overflow: hidden; background: var(--paper); cursor: pointer; }
.boc-splash a { position: absolute; display: block; }
.boc-splash a img { display: block; width: 100%; height: auto; }
body.home header.site { display: none; }
body.home main { padding: 0px; }
body.home footer.site { position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 100; margin: 0px; background: var(--paper); }
.boc-loi { border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 12px; }
.boc-loi h2 { font-size: var(--m); font-weight: 700; margin: 0px 0px 10px; }
.boc-loi .boc-rel { border-top: 0px; margin-top: 0px; padding-top: 0px; }
.boc-rel, .rel { border-top: 1px solid var(--rule); margin-top: 32px; padding-top: 10px; font-size: var(--s); }
.boc-rel h3, .rel .k { font-weight: 700; }
.boc-rel ul { list-style: none; margin: 0px; padding: 0px; }
.boc-rel li { display: inline; margin-right: 12px; }
.boc-list, .index { list-style: none; margin: 24px 0px; padding: 0px; }
.boc-list li, .index .r { display: flex; justify-content: space-between; gap: 8px 16px; border-bottom: 1px dotted var(--faint); padding: 5px 0px; flex-wrap: wrap; font-size: var(--m); }
.boc-list li .boc-dim, .index .r .yr { color: var(--mut); white-space: nowrap; margin-left: auto; }
.boc-gap, .index .r.gap { color: rgb(153, 153, 153); }
.boc-badge { font-size: var(--s); border: 1px solid var(--ink); padding: 0px 5px; }
.boc-pf-toggle { display: flex; gap: 20px; margin: 10px 0px 34px; }
.boc-pf-tab { font-family: var(--mono); font-size: var(--m); background: none; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: initial; padding: 0px 0px 3px; cursor: pointer; color: var(--mut); }
.boc-pf-tab:hover { color: var(--ink); }
.boc-pf-tab.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.boc-pf-list[hidden] { display: none; }
.boc-pf-item { padding: 0px 0px 44px; margin: 0px 0px 44px; border-bottom: 1px solid var(--rule); }
.boc-pf-item:last-child { border-bottom: 0px; }
.boc-pf-title { font-family: var(--serif); font-weight: 400; font-size: var(--l); line-height: 1.15; margin: 0px 0px 18px; }
.boc-pf-title a { border-bottom: 1px solid transparent; }
.boc-pf-title a:hover { border-bottom-color: var(--ink); text-decoration: none; }
.boc-pf-num { color: var(--mut); }
.boc-pf-year { font-family: var(--mono); font-size: var(--s); letter-spacing: 0.1em; color: var(--mut); }
.boc-pf-note { max-width: none; margin: 18px 0px 0px; }
.boc-pf-note p { margin: 0px 0px 0.6em; }
.boc-pf-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); margin: 0px; }
.boc-pf-media.is-single { grid-template-columns: 1fr; max-width: 820px; }
.boc-pf-fig { margin: 0px; }
.boc-pf-fig img { display: block; width: 100%; height: auto; }
.boc-pf-fig figcaption { font-family: var(--mono); font-size: var(--s); color: var(--mut); line-height: 1.4; margin-top: 6px; }
.boc-pf-more { font-family: var(--mono); font-size: var(--s); color: var(--mut); }
.boc-pf-more:hover { color: var(--ink); }
.boc-pf-empty { color: var(--mut); font-size: var(--s); }
@media (max-width: 600px) {
  .boc-pf-media { grid-template-columns: 1fr; }
}
* { border-radius: 0px !important; box-shadow: none !important; }
@media (max-width: 810px) {
  :root { --pad: 20px; --gap: 18px; }
  .menu-toggle { display: inline-block; }
  nav.menu { display: none; width: 100%; }
  nav.menu ul { flex-direction: column; align-items: flex-start; gap: 10px; border-top: 1px solid var(--rule); padding: 12px 0px; }
  header.site.open nav.menu { display: block; }
  header.site .row { flex-wrap: wrap; }
  .cols { grid-template-columns: 1fr; }
  .grid, .boc-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  :root { --pad: 16px; --gap: 14px; }
  .grid, .boc-gallery { grid-template-columns: 1fr; }
  .boc-list li .boc-dim, .index .r .yr { margin-left: 0px; flex-basis: 100%; }
}

/* ============================================================
   Responsive multi-column TEXT utility  (append to boc-style.css)
   ------------------------------------------------------------
   Flows prose into up to N columns, and steps N -> ... -> 2 -> 1
   automatically as the window narrows, always preserving a
   readable measure (no breakpoints needed).

   Use: wrap the text in a Group block, then in the block's
   Advanced -> Additional CSS class(es) add  textcols-3
   (or textcols-2 / textcols-4).

   NOTE: this is a TEXT system, separate from the image `cols-N`
   layout (that one flexes image figures). Don't mix them.
   Tune the whole system with one variable, --colmeasure.
   ============================================================ */

:root { --colmeasure: 32ch; }   /* minimum readable column width */

[class*="textcols-"] { column-gap: var(--gap); }

.textcols-2 { columns: var(--colmeasure) 2; }   /* up to 2 columns */
.textcols-3 { columns: var(--colmeasure) 3; }   /* up to 3 columns */
.textcols-4 { columns: var(--colmeasure) 4; }   /* up to 4 columns */

/* keep section headings whole; let paragraphs flow for even columns */
[class*="textcols-"] h2,
[class*="textcols-"] h3,
[class*="textcols-"] h4 { break-inside: avoid; break-after: avoid; }

/* first heading in a column shouldn't carry a big top margin */
[class*="textcols-"] > :first-child { margin-top: 0; }