/* ==========================================================================
   Deep Margins — editorial theme stylesheet
   Palette, type roles and all five pages draw from this one file.
   ========================================================================== */

:root {
  --paper:      #F6F3EC;
  --paper-2:    #F0EBE0;
  --paper-3:    #E7E0D1;
  --rule:       #D9D1BF;
  --rule-soft:  #E4DDCD;
  --ink:        #1B1A15;
  --ink-2:      #4C4839;
  --ink-3:      #706957;
  --rubric:     #A8382A;
  --rubric-dim: #C9A79E;
  --azure:      #2A55C8;
  --azure-soft: #DDE3F5;
  --moss:       #5C6B3F;
  --plate:      #FCFAF5;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --grot: ui-sans-serif, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --rail: 9.5rem;
  --gutter: 3.25rem;
  --margin: 19rem;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-padding-top: 2rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.58;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* ---------- type roles ---------------------------------------------------- */

.lbl {
  font-family: var(--grot);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }
.prose a, .under { box-shadow: inset 0 -1px 0 var(--rule); }
.prose a:hover, .under:hover { box-shadow: inset 0 -2px 0 var(--rubric-dim); color: var(--rubric); }

/* ---------- the 5-zone editorial grid ------------------------------------- */
/*  [left rail] [prose measure] [right margin]                                */

.sheet {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure)) var(--margin);
  gap: var(--gutter);
  width: min(100%, 75rem);
  margin: 0 auto;
  padding: 0 3rem 8rem;
}
.page-content { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: inherit; min-width: 0; }
.page-content > * { min-width: 0; }

/* ---------- masthead ------------------------------------------------------ */

.masthead {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 1.5rem;
  padding: 2.6rem 0 1.1rem;
  border-bottom: 1px solid var(--ink);
}
.wordmark {
  font-family: var(--mono);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
}
.wordmark::after { content: ""; display: inline-block; width: 3px; height: .8em; background: var(--rubric); margin-left: 3px; }
.masthead .tag { color: var(--ink-3); font-style: italic; font-size: 15px; }
.masthead nav { margin-left: auto; display: flex; gap: 1.4rem; }
.masthead nav a { padding: .5rem 0; }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--rubric); }

/* ---------- the left rail ------------------------------------------------ */

.rail { width: var(--rail); }
.rail-sticky { position: sticky; top: 2.4rem; }
.rail-group { margin-bottom: 1.9rem; }
.rail-group > .lbl { display: block; margin-bottom: .55rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule); }
.metadata { list-style: none; padding: 0; margin: 0; }
.rail .metadata li { margin: 0 0 .18rem; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.metadata .k { color: var(--ink-3); }

.toc { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.toc li { counter-increment: t; font-size: 12.5px; line-height: 1.35; margin-bottom: .5rem; }
.toc li::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--rubric); margin-right: .5rem; }
.toc li a { color: var(--ink-2); display: block; margin: -.9rem 0 0 1.5rem; }
.toc li a:hover { color: var(--rubric); }
.toc li.on a { color: var(--ink); font-weight: 600; }
.toc li.on { border-left: 1px solid var(--rubric); margin-left: 0; padding-left: 0; }
.toc li.on::before { margin-left: .4rem; }

/* ---------- growth taxonomy --------------------------------------------- */

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; }
.dot.tended   { background: var(--rubric); }
.dot.planted  { background: var(--moss); }
.dot.seedling { background: none; border: 1.5px solid var(--ink-3); width: 5px; height: 5px; }
.dot.papered  { background: none; border: 1.5px solid var(--ink-3); width: 7px; height: 7px; border-radius: 0; }

.state { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; }
.state .dot { flex: none; }
.state .t { font-family: var(--grot); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }

.filter {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding: .7rem 0;
}
.filter .state { color: var(--ink-3); min-width: 0; }
.filter .state.on { color: var(--ink); }
.filter button { border: 0; border-bottom: 1px solid transparent; background: none; padding: .5rem 0; cursor: pointer; font: inherit; }
.filter button:hover { color: var(--rubric); }
.filter button.on { border-bottom-color: var(--rubric); }
.filter .count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.filter .spacer { margin-left: auto; }

/* ==========================================================================
   INDEX — the tonsky layer: flat, year-grouped, nothing but title + date
   ========================================================================== */

.year {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure)) var(--margin);
  gap: var(--gutter);
  border-top: 1px solid var(--ink);
  padding-top: 1.6rem;
  margin-top: 2.6rem;
}
.year:first-of-type { border-top: 0; }
.year h2 {
  grid-column: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: 26px; font-weight: 500; letter-spacing: -.02em;
  color: var(--ink);
  text-align: right;
}
.year h2 .n { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: .06em; margin-top: .3rem; }

.entries { grid-column: 2 / -1; }
.entries .entries { grid-column: auto; }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.6rem 1.1rem;
  align-items: baseline;
  gap: 1rem;
  padding: .34rem 0;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.row:hover, .row:focus-visible { background: var(--paper-2); }
.row .title { font-size: 17.5px; line-height: 1.4; }
.row .title .sub { display: block; font-size: 13px; color: var(--ink-3); font-style: italic; margin-top: .12rem; }
.row:hover .title { color: var(--rubric); }
.row .date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); text-align: right; }
.row .dot { justify-self: end; }

/* the hover plate — nan.fyi's one donation, living in the margin */
.plate {
  position: fixed;
  top: 8rem;
  right: 2.4rem;
  width: 17.5rem;
  background: var(--plate);
  border: 1px solid var(--rule);
  padding: .85rem .85rem .7rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 40;
}
.plate.show { opacity: 1; transform: none; }
.plate .cap { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: .6rem; letter-spacing: .04em; }

/* ==========================================================================
   GARDEN — bradwoods' tree, drawn in CSS
   ========================================================================== */

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: .72rem; border-left: 1px solid var(--rule); }
.tree li { position: relative; padding: .26rem 0 .26rem 1.05rem; font-size: 14.5px; color: var(--ink-2); }
.tree li::before {
  content: ""; position: absolute; left: 0; top: .86rem;
  width: .7rem; height: 1px; background: var(--rule);
}
.tree li:last-child { padding-bottom: .26rem; }
.tree > li { padding-left: 0; }
.tree > li::before { display: none; }
.tree .branch {
  font-family: var(--grot); font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
}
.tree .branch .n { font-family: var(--mono); font-weight: 400; letter-spacing: 0; color: var(--ink-3); margin-left: .45rem; }
.tree a:hover { color: var(--rubric); }
.tree .here { color: var(--rubric); box-shadow: inset 0 -1px 0 var(--rubric-dim); }

/* ==========================================================================
   ESSAY — gwern's margin apparatus + nan.fyi's figure
   ========================================================================== */

.essay { grid-column: 2; }
.essay > * { max-width: var(--measure); }

h1.title {
  font-size: 40px; line-height: 1.1; font-weight: 500;
  letter-spacing: -.02em; margin: .9rem 0 .5rem;
}
h1.title em { font-style: italic; color: var(--rubric); }
.byline { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-bottom: 2rem; }
.byline .state { margin-right: 1rem; }

.prose p { margin: 0 0 1.05rem; }
.prose h2 {
  font-family: var(--grot); font-size: 11px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  margin: 3rem 0 .9rem; padding-top: .8rem; border-top: 1px solid var(--rule);
}
.prose h2 .n { font-family: var(--mono); color: var(--rubric); margin-right: .8rem; letter-spacing: 0; }

.lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.lede::first-letter {
  float: left; font-size: 3.6em; line-height: .78;
  padding: .04em .1em 0 0; color: var(--rubric);
  font-weight: 400;
}

sup.sn {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--azure); margin-left: .12em; vertical-align: super;
}
mark { background: none; color: var(--rubric); }

/* right margin notes */
.marginnote {
  float: right;
  clear: right;
  width: var(--margin);
  margin-right: calc(-1 * (var(--margin) + var(--gutter)));
  margin-bottom: 1.1rem;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  padding-left: .95rem;
  border-left: 1px solid var(--rubric-dim);
}
.marginnote .n {
  display: block; font-family: var(--mono); font-size: 11px;
  color: var(--rubric); letter-spacing: .08em; margin-bottom: .3rem;
}
.marginnote.sidenote { border-left-style: dotted; border-left-color: var(--rule); }
.marginnote code, .plate code { font-family: var(--mono); font-size: 12px; background: var(--paper-2); padding: .05em .3em; }
.dm-footnote { max-width: none; }
.dm-footnote > :last-child { margin-bottom: 0; }
.dm-footnote .footnote-backref { font-family: var(--mono); color: var(--azure); }
.dm-footnote pre { overflow-x: auto; max-width: 100%; }
.dm-footnote img { max-width: 100%; height: auto; }
.entry-content .dm-footnote :is(h2, h3, h4, h5, h6) { font-size: 1em; line-height: 1.35; margin: 1rem 0 .5rem; }

/* link popup (gwern) */
.lp { position: relative; box-shadow: inset 0 -1px 0 var(--rule); cursor: help; }
.pop {
  position: absolute; left: 0; top: 1.7em; width: 21rem;
  background: var(--plate); border: 1px solid var(--rule);
  padding: .7rem .85rem; font-size: 13.5px; line-height: 1.42;
  color: var(--ink-2); font-family: var(--serif);
  opacity: 0; transform: translateY(-4px); transition: .15s ease;
  pointer-events: none; z-index: 30;
}
.lp:hover .pop, .lp:focus-visible .pop { opacity: 1; transform: none; }
.pop b { font-style: italic; font-weight: 500; color: var(--ink); }

/* the plate — nan.fyi's interactive figure, one per essay */
.plate-block {
  /* spans prose + margin — nan.fyi's figure, full width */
  grid-column: 2 / 4;
  margin: 2.2rem 0 2.6rem;
  max-width: none;
  background: var(--plate);
  border: 1px solid var(--rule);
  padding: 1.1rem 1rem .8rem;
}
.plate-block .cap {
  display: flex; gap: .8rem; align-items: baseline;
  margin: 0 0 .9rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule-soft);
}
.plate-block .cap .fig { font-family: var(--mono); font-size: 11px; color: var(--rubric); letter-spacing: .06em; }
.plate-block .cap .say { font-size: 13px; color: var(--ink-2); font-style: italic; }
.plate-block .foot {
  margin: .8rem 0 0; padding-top: .6rem; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  display: flex; gap: 1.2rem;
}
.plate-block .foot .hint { color: var(--azure); }

.holo { display: block; width: 100%; height: auto; }
.holo .lif { fill: var(--azure); }
.holo .bg { fill: var(--azure-soft); }
.holo .ax { stroke: var(--ink-3); stroke-width: .6; }
.holo .tick { stroke: var(--rule); stroke-width: .6; }
.holo text { font-family: var(--mono); font-size: 9px; fill: var(--ink-3); letter-spacing: .03em; }
.holo .frame { fill: none; stroke: var(--ink-3); stroke-width: .8; }
.holo .curve { fill: none; stroke: var(--rubric); stroke-width: 1.5; }
.holo .ruleline { stroke: var(--rule); stroke-width: .7; stroke-dasharray: 2 2; }
.holo .cell { fill: none; stroke: var(--rule); stroke-width: .6; }
.holo .hot { fill: var(--rubric); opacity: .16; }
.holo .lbl-hot { font-size: 9px; fill: var(--rubric); }

.pull {
  margin: 2.4rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 1px solid var(--rubric);
  font-size: 21px; line-height: 1.42; font-style: italic; color: var(--ink);
  width: calc(var(--measure) + 3rem);
}
.pull cite { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: .6rem; letter-spacing: .06em; }

pre {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  background: var(--paper-2); border-left: 1px solid var(--rule);
  padding: .85rem 1rem; overflow-x: auto; margin: 0 0 1.2rem;
}
code { font-family: var(--mono); font-size: .78em; background: var(--paper-2); padding: .1em .32em; }
pre code { background: none; padding: 0; font-size: inherit; }
.tok-k { color: var(--rubric); }
.tok-s { color: var(--moss); }
.tok-c { color: var(--ink-3); font-style: italic; }

/* end-of-essay apparatus */
.endnote {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--ink);
  font-size: 13.5px; color: var(--ink-2);
}
.endnote h3 { font-family: var(--grot); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem; }
.endnote ol { padding-left: 1.3rem; margin: 0; }
.endnote li { margin-bottom: .5rem; }

/* ---------- mode dock (gwern) ------------------------------------------- */

.dock {
  position: fixed; right: 1.1rem; bottom: 1.1rem;
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--paper); border: 1px solid var(--rule);
  padding: .25rem; z-index: 50;
}
.dock button {
  width: 36px; height: 36px; border: 0; background: none; cursor: pointer;
  color: var(--ink-3); display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px;
}
.dock button:hover { background: var(--paper-3); color: var(--rubric); }
.dock button.on { color: var(--rubric); }
.dock button:disabled { opacity: .4; cursor: default; }
.dock button:disabled:hover { background: none; color: var(--ink-3); }
.dock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

/* ---------- index hero --------------------------------------------------- */

.hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure)) var(--margin);
  gap: var(--gutter);
  padding: 2.2rem 0 .4rem;
  align-items: start;
}
.hero .hello {
  grid-column: 2;
  font-size: 21px; line-height: 1.55; color: var(--ink-2);
}
.hero .hello b { font-weight: 500; color: var(--ink); }
.intro-avatar {
  grid-column: 1; grid-row: 1; justify-self: end;
  width: 96px; height: 96px;
}
.intro-avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.intro-avatar-initial {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--paper-2); color: var(--ink-2);
  font: 40px/1 var(--serif); text-transform: uppercase;
}
.hero .aside {
  grid-column: 3; font-size: 13.5px; line-height: 1.5; color: var(--ink-3);
  border-left: 1px solid var(--rule); padding-left: .95rem;
}
.hero .aside .lbl { display: block; margin-bottom: .45rem; }
.hero .aside a { color: var(--ink-2); box-shadow: inset 0 -1px 0 var(--rule); }

/* ---------- footer ------------------------------------------------------- */

.colophon {
  grid-column: 1 / -1;
  margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--ink);
  display: flex; gap: 2rem; align-items: baseline;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.colophon .spacer { margin-left: auto; }

/* ---------- 404 ---------------------------------------------------------- */

.gone { grid-column: 2; padding-top: 6rem; }
.gone .big {
  font-family: var(--mono); font-size: 96px; line-height: .9; font-weight: 500;
  color: var(--rubric); letter-spacing: -.04em;
}
.gone h1 { font-size: 30px; font-weight: 500; margin: 1.4rem 0 .7rem; letter-spacing: -.015em; }
.gone p { color: var(--ink-2); font-size: 16.5px; max-width: 27rem; }

/* ---------- blog "about / talks / logos" flat pages ---------------------- */

.plate-grid {
  grid-column: 2 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
}
.plate-card {
  border: 1px solid var(--rule); padding: .9rem; background: var(--plate);
}
.plate-card .lbl { display: block; margin-bottom: .5rem; }
.plate-card .big { font-family: var(--serif); font-size: 19px; line-height: 1.32; }
.plate-card .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: .5rem; }

/* ---------- demo helper (not part of the design) ------------------------- */

.crosslinks {
  grid-column: 1 / -1; margin-top: 2rem; padding-top: .9rem;
  border-top: 1px dashed var(--rule);
  display: flex; gap: 1.5rem; align-items: baseline;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.crosslinks a { color: var(--ink-2); box-shadow: inset 0 -1px 0 var(--rule); }
.crosslinks .lbl { color: var(--rubric); }

/* Reading surfaces and preview controls. The editorial grid remains the system. */
[hidden] { display: none !important; }
::selection { background: var(--rubric); color: var(--paper); }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 4px; }
input { accent-color: var(--rubric); caret-color: var(--rubric); }
html { scrollbar-color: var(--rule) var(--paper); }
a { text-underline-offset: .2em; }
.sr-only, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 1rem; left: 1rem; z-index: 100;
  background: var(--paper); color: var(--rubric); padding: .6rem 1rem;
}
.rail-group > summary.lbl {
  list-style: none; cursor: pointer; display: block; margin-bottom: .55rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--rule);
}
.rail-group > summary::-webkit-details-marker { display: none; }
.rail-group > summary:hover { color: var(--rubric); }
.sample-reference { color: var(--ink-2); }
.contact { overflow-wrap: anywhere; }
.masthead nav a[aria-current] { color: var(--rubric); }
.tree > li + li { margin-top: .8rem; }
.tree a:focus-visible { color: var(--rubric); }
.pull { max-width: var(--measure); }
.recovery-note { margin-top: 2rem !important; font-size: 14px !important; }
.crosslinks { flex-wrap: wrap; gap: .6rem 1.5rem; }
.crosslinks a { padding: .35rem 0; }
.plate-block .foot { flex-wrap: wrap; align-items: center; }
.figure-key { display: none; }
#claim-position { width: 8rem; margin: 0; min-height: 28px; }
#latticeFig { cursor: crosshair; }
.search-panel {
  grid-column: 1 / -1; border-bottom: 1px solid var(--rule);
  padding: 0 0 1.2rem;
}
.search-panel label { display: block; margin-bottom: .5rem; }
.search-field { display: flex; gap: 1rem; align-items: center; }
.search-field input {
  min-width: 0; width: min(100%, var(--measure)); border: 1px solid var(--rule);
  background: var(--plate); color: var(--ink); font: inherit; padding: .6rem .75rem;
}
.search-field button {
  background: none; border: 0; padding: .6rem; cursor: pointer;
  color: var(--ink-2); font: 12px var(--mono);
}
.search-results { list-style: none; padding: 0; margin: 1rem 0 0; max-width: var(--measure); }
.search-results a { display: block; padding: .35rem 0; }
.search-results a:hover { color: var(--rubric); }
.search-message { margin: .75rem 0 0; color: var(--ink-3); font: 11px var(--mono); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #211F1A; --paper-2: #2B2822; --paper-3: #383329;
  --plate: #26231E; --ink: #EDE7DB; --ink-2: #CBC2B1; --ink-3: #ACA38F;
  --rule: #5D5546; --rule-soft: #403A30;
  --rubric: #E1846F; --rubric-dim: #9E6857;
  --azure: #9BACED; --azure-soft: #303A5B; --moss: #A9B885;
}

body[data-reader="true"] .sheet {
  grid-template-columns: minmax(0, var(--measure));
  width: min(100%, calc(var(--measure) + 6rem));
}
body[data-reader="true"] .masthead { flex-wrap: wrap; }
body[data-reader="true"] .masthead nav { margin-left: 0; width: 100%; }
body[data-reader="true"] .rail { display: none; }
body[data-reader="true"] .essay,
body[data-reader="true"] .plate-block { grid-column: 1 / -1 !important; }
body[data-reader="true"] .marginnote {
  float: none; width: 100%; margin: .5rem 0 1.5rem; padding-left: .9rem;
}
body[data-reader="true"] .colophon { flex-wrap: wrap; }

@media (max-width: 70rem) {
  :root { --rail: 8rem; --margin: 14rem; --gutter: 2rem; }
  /* Longer Markdown definitions can occupy the dock's fixed position. */
  .has-markdown-footnotes .dock { position: static; width: 100%; border: 0; padding: 0; flex-direction: row; gap: .6rem; }
  .has-markdown-footnotes .dock button { width: 44px; height: 44px; }
  .sheet { padding-right: 2rem; padding-left: 2rem; }
  .masthead { flex-wrap: wrap; gap: .6rem 1.5rem; }
  .masthead .tag { flex: 1; }
  .masthead nav { gap: 1.1rem; }
  .plate { display: none; }
}

@media (max-width: 60rem) {
  .sheet { grid-template-columns: var(--rail) minmax(0, var(--measure)); width: min(100%, 48rem); }
  .hero, .year, .garden-head, .cat-head { grid-template-columns: var(--rail) minmax(0, 1fr) !important; }
  .hero .aside { grid-column: 2; }
  .marginnote { float: none; width: 100%; margin: .5rem 0 1.5rem; padding-left: .9rem; }
  .plate-block { grid-column: 2 / -1; padding: .9rem .75rem; }
  .plate-block .cap { flex-wrap: wrap; gap: .4rem; }
  .filter { flex-wrap: wrap; gap: .1rem 1.2rem; }
  .filter .count { width: 100%; }
  .filter .spacer { display: none; }
  .garden-head .legend { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
  body[data-page="garden"] .page-content > .rail {
    grid-column: 1 / -1 !important; width: 100%;
  }
  body[data-page="garden"] .rail-sticky { position: static; display: flex; flex-wrap: wrap; gap: 2rem; }
  body[data-page="garden"] .rail-group, .mstats { flex: 1; min-width: 10rem; margin-top: 0 !important; }
  .cat-head .meta { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .cat { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem 2rem !important; }
  .cat section:last-child { grid-column: 1 / -1; }
  .feature { gap: 1rem !important; }
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .colophon { flex-wrap: wrap; gap: .6rem 1.5rem; }
  .pop { width: min(21rem, 70vw); }
}

@media (max-width: 40rem) {
  :root { --gutter: 1.75rem; }
  body { font-size: 17px; }
  .sheet { grid-template-columns: minmax(0, 1fr); padding: 0 1.25rem 7rem; }
  .masthead { padding-top: 1.5rem; }
  .masthead .tag { width: 100%; flex-basis: 100%; font-size: 13px; }
  .masthead nav { width: 100%; margin-left: 0; gap: 1.5rem; }
  .masthead nav a { min-height: 40px; display: flex; align-items: center; }
  .hero, .year, .garden-head, .cat-head { grid-template-columns: minmax(0, 1fr) !important; gap: 1rem; }
  .hero { padding-top: .5rem; }
  .intro-avatar { grid-column: 1 / -1; justify-self: start; width: 80px; height: 80px; }
  .hero .hello, .hero .aside, .entries, .essay, .plate-block,
  .garden-head h1, .garden-head .lede-sm, .tree-wrap,
  .cat-head h1, .cat-head p { grid-column: 1 / -1 !important; }
  .hero .hello { font-size: 20px; margin: 0; }
  .year { margin-top: 1rem; padding-top: 1.2rem; }
  .year h2 { text-align: left; display: flex; gap: 1rem; align-items: baseline; font-size: 24px; }
  .year h2 .n { margin-top: 0; }
  .row { grid-template-columns: minmax(0, 1fr) 3.4rem .55rem; gap: .7rem; padding: .55rem 0; }
  .row .title { font-size: 17px; }
  .row .date { font-size: 11px; }
  .filter { gap: .15rem .6rem; }
  .filter > .lbl { width: 100%; }
  .filter button { min-height: 40px; }
  .rail { width: 100%; }
  .rail-sticky { position: static; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
  .rail-group { margin-bottom: .25rem; }
  body[data-page="essay"] .rail-group { flex: 1 1 35%; }
  .rail-group > summary.lbl { min-height: 32px; }
  .rail-group > summary.lbl::after { content: "+"; float: right; font: 12px var(--mono); }
  .rail-group[open] > summary.lbl::after { content: "−"; }
  h1.title { font-size: 34px; margin-top: .25rem; }
  .byline { line-height: 1.8; margin-bottom: 1.5rem; }
  .lede { font-size: 19px; }
  .lede::first-letter { font-size: 3em; }
  .prose h2 { margin-top: 2.25rem; letter-spacing: .09em; }
  .pull { width: 100%; font-size: 20px; padding-left: 1rem; }
  .plate-block { margin: .25rem 0; }
  .plate-block .foot { gap: .3rem .8rem; }
  .holo text { letter-spacing: 0; }
  #latticeFig text { display: none; }
  .figure-key { display: block; margin: .7rem 0 0; color: var(--ink-3); font: 11px/1.6 var(--mono); }
  .garden-head h1 { font-size: 32px !important; }
  .garden-head { padding: .75rem 0 1.5rem !important; }
  .garden-head .lede-sm { margin-top: 0 !important; }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .tree-wrap { padding-top: .25rem !important; }
  .tree .leaf { grid-template-columns: minmax(0, 1fr) 3rem .55rem !important; gap: .5rem !important; }
  .tree li { font-size: 15px; }
  .tree ul ul li { font-size: 14px !important; }
  .tree ul { margin-left: .5rem; }
  .tended-today { margin-top: 1rem !important; }
  .tended-today ol { gap: 1rem !important; }
  .cat-head { padding: .5rem 0 1.5rem !important; }
  .cat { grid-template-columns: minmax(0, 1fr) !important; margin-top: .5rem !important; gap: .5rem !important; }
  .cat section { margin-bottom: 1rem !important; }
  .feature { grid-template-columns: minmax(0, 1fr) !important; gap: 1.5rem !important; }
  .card .body { padding-top: .75rem !important; }
  .gone { padding-top: .5rem; }
  .gone .big { font-size: 80px; }
  .gone h1 { font-size: 28px; }
  .guess { margin-top: 1.75rem !important; }
  .colophon { margin-top: 2rem; }
  .colophon .spacer { display: none; }
  .crosslinks { font-size: 11px; }
  .crosslinks .lbl { flex-basis: 100%; }
  .dock { position: static; width: 100%; border: 0; padding: 0; flex-direction: row; gap: .6rem; }
  .dock button { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


  /* ---- garden-only: the tree owns the whole left side ---- */
  .garden-head {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: var(--rail) minmax(0, var(--measure)) var(--margin);
    gap: var(--gutter);
    padding: 2.4rem 0 2rem;
    border-bottom: 1px solid var(--ink);
    align-items: end;
  }
  .garden-head h1 {
    grid-column: 1 / 3;
    font-size: 38px; font-weight: 500; letter-spacing: -.02em;
    margin: 0; line-height: 1.1;
  }
  .garden-head h1 em { font-style: italic; color: var(--rubric); }
  .garden-head .lede-sm {
    grid-column: 1 / 3; font-size: 17px; color: var(--ink-2); margin: 1rem 0 0; max-width: 30rem;
  }
  .garden-head .legend { grid-column: 3; grid-row: 1 / 3; align-self: end; }

  .tree-wrap { grid-column: 1 / 3; padding-top: 2.4rem; }
  .tree .leaf { display: grid; grid-template-columns: 1fr 4.2rem 1.1rem; gap: 1rem; align-items: baseline; }
  .tree .leaf .d { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: right; }
  .tree .leaf .dot { justify-self: end; }
  .tree li { padding-top: .4rem; padding-bottom: .4rem; }
  .tree ul ul li { font-size: 13.5px; }

  .legend-row { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; font-size: 13px; color: var(--ink-2); }
  .legend-row .lbl { width: 4.6rem; flex: none; overflow-wrap: anywhere; }
  .legend-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }

  .mstats { margin-top: 2rem; }
  .mstats .bar { display: flex; height: 6px; margin: .5rem 0 .8rem; }
  .mstats .bar i { flex: 1; }
  .mstats .bar .a { background: var(--rubric); flex: 8; }
  .mstats .bar .b { background: var(--moss); flex: 3; }
  .mstats .bar .c { background: var(--rule); flex: 3; }
  .mstats .bar .d { background: var(--paper-3); flex: 9; }
  .mstats .metadata { margin: 0; }
  .mstats .metadata li { margin: 0 0 .2rem; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
  .mstats .metadata .k { color: var(--ink-3); }

  /* the tended-today strip */
  .tended-today {
    grid-column: 1 / -1; margin-top: 3rem; padding-top: 1rem;
    border-top: 1px solid var(--rule);
  }
  .tended-today .lbl { display: block; margin-bottom: .8rem; }
  .tended-today ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; flex-wrap: wrap; }
  .tended-today li { font-size: 14px; color: var(--ink-2); }
  .tended-today li .t { font-family: var(--mono); font-size: 11px; color: var(--ink-3); display: block; margin-top: .2rem; }


  /* ---- the gwern catalogue page: small-caps labels, skewed columns ---- */
  .cat-head {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: var(--rail) minmax(0, var(--measure)) var(--margin);
    gap: var(--gutter);
    padding: 2.4rem 0 1.6rem;
    border-bottom: 1px solid var(--ink);
  }
  .cat-head h1 { grid-column: 1 / 3; margin: 0; font-size: 34px; font-weight: 500; letter-spacing: -.02em; }
  .cat-head p { grid-column: 1 / 3; margin: .9rem 0 0; color: var(--ink-2); font-size: 16.5px; max-width: 32rem; }
  .cat-head .meta { grid-column: 3; grid-row: 1 / 3; align-self: end; font-family: var(--mono); font-size: 11px; color: var(--ink-3); line-height: 1.7; }

  .cat { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.6rem; margin-top: 2.6rem; }
  .cat section { break-inside: avoid; margin-bottom: 2.4rem; }
  .cat h2 {
    font-family: var(--grot); font-size: 11px; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase;
    margin: 0 0 .7rem; padding-bottom: .4rem;
    border-bottom: 1px solid var(--rule);
    display: flex; align-items: baseline;
  }
  .cat h2 .n { margin-left: auto; font-family: var(--mono); font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
  .cat ul { list-style: none; margin: 0; padding: 0; }
  .cat li {
    font-size: 14px; line-height: 1.42; padding: .28rem 0;
    display: flex; align-items: baseline; gap: .6rem;
    color: var(--ink-2);
  }
  .cat li .y { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none; width: 2.4rem; }
  .cat li a { box-shadow: inset 0 -1px 0 transparent; }
  .cat li a:hover { color: var(--rubric); box-shadow: inset 0 -1px 0 var(--rubric-dim); }
  .cat li .tag { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none; }

  /* one wide feature block, for the things that deserve an image */
  .feature {
    grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem;
    margin-top: 1rem;
  }
  .card {
    background: transparent;
    padding: 0; overflow: hidden; display: flex; flex-direction: column;
  }
  .card .art { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
  .card .art svg { display: block; width: 100%; height: auto; }
  .card .body { padding: .85rem 0 .95rem; }
  .card .body .lbl { display: block; margin-bottom: .45rem; }
  .card .body .t { font-size: 16.5px; line-height: 1.34; }
  .card .body .d { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: .55rem; }
  .card:hover .t { color: var(--rubric); }

  .contact {
    grid-column: 1 / -1; margin-top: 1.5rem; padding-top: 1.2rem;
    border-top: 1px solid var(--ink);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem;
  }
  .contact div { font-size: 14px; color: var(--ink-2); }
  .contact .lbl { display: block; margin-bottom: .45rem; }
  .contact a { box-shadow: inset 0 -1px 0 var(--rule); }
  .contact a:hover { color: var(--rubric); box-shadow: inset 0 -1px 0 var(--rubric-dim); }

/* WordPress layout, native blocks, and user-authored content. */
html { scroll-behavior: auto; }
.wordmark, .masthead .tag { overflow-wrap: anywhere; }
.primary-menu, .footer-links ul { display: flex; list-style: none; gap: 1.4rem; margin: 0; padding: 0; flex-wrap: wrap; }
.primary-menu li { position: relative; }
.primary-menu .current-menu-item > a, .primary-menu .current-menu-ancestor > a { color: var(--rubric); }
.primary-menu .sub-menu { list-style: none; margin: .5rem 0; padding: .5rem .75rem; min-width: 12rem; background: var(--paper); border: 1px solid var(--rule); }
.has-js .primary-menu .sub-menu { display: none; position: absolute; left: 0; top: 100%; z-index: 60; }
.has-js .primary-menu li:hover > .sub-menu, .has-js .primary-menu li:focus-within > .sub-menu, .has-js .primary-menu .sub-menu.is-open { display: block; }
.primary-menu .sub-menu .sub-menu { top: 0; left: 100%; }
.submenu-toggle { border: 0; background: none; color: var(--ink-3); min-width: 28px; min-height: 28px; cursor: pointer; }
.submenu-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.custom-logo { max-width: 15rem; max-height: 2.5rem; width: auto; height: auto; }
.archive-head { grid-column: 2 / -1; }
.index-title { font-size: 40px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 .75rem; }
.hero .hello p { margin: 0 0 1rem; }
.hero .aside p { margin: 0 0 1rem; }
.filter a { padding: .5rem 0; border-bottom: 1px solid transparent; }
.filter a.on { border-bottom-color: var(--rubric); }
.filter .count { margin-left: auto; }
.entry-content { display: flow-root; overflow-wrap: anywhere; }
.entry-content > :first-child { margin-top: 0; }
.entry-content > * { max-width: 100%; }
.entry-content h3, .entry-content h4 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; }
.entry-content li + li { margin-top: .3rem; }
.entry-content img, .catalogue-content img { height: auto; max-width: 100%; }
.entry-content figure, .catalogue-content figure { margin-left: 0; margin-right: 0; }
.entry-content figure > img { display: block; }
.entry-content figcaption, .catalogue-content figcaption { font-size: 13px; color: var(--ink-3); margin-top: .6rem; }
.entry-content .alignwide, .entry-content .alignfull, .entry-content > .plate-block { width: calc(100% + var(--gutter) + var(--margin)); max-width: none; }
.entry-content .wp-block-gallery { gap: 1rem; }
.entry-content .alignleft { float: left; margin: .3rem 1.2rem .75rem 0; max-width: 45%; }
.entry-content .alignright { float: right; margin: .3rem 0 .75rem 1.2rem; max-width: 45%; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }
.entry-content .wp-block-embed { overflow-wrap: anywhere; }
.entry-content iframe { max-width: 100%; }
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content th, .entry-content td { padding: .5rem .6rem; border: 1px solid var(--rule); text-align: start; }
.entry-content pre { max-width: 100%; overflow-wrap: normal; }
.wp-block-quote { margin: 2rem 0; border-left: 1px solid var(--rubric); padding-left: 1.2rem; }
.is-style-lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.is-style-lede::first-letter { float: left; font-size: 3.6em; line-height: .78; padding: .04em .1em 0 0; color: var(--rubric); }
.is-style-margin-note { float: right; clear: right; width: var(--margin); max-width: none; margin: 0 calc(-1 * (var(--margin) + var(--gutter))) 1.1rem 0; padding-left: .95rem; border-left: 1px solid var(--rubric-dim); font-size: 14px; color: var(--ink-2); }
.entry-content > .marginnote { max-width: none; }
.marginnote p, .is-style-margin-note p { margin-bottom: .5rem; }
.topic-links, .tag-links { font: 11.5px/1.8 var(--mono); color: var(--ink-2); }
.toc-subsection { padding-left: .5rem; }
.post-navigation { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--ink); }
.post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.post-navigation .nav-next { text-align: right; }
.post-navigation .lbl { display: block; margin-bottom: .5rem; }
.pagination { grid-column: 2 / -1; margin-top: 2rem; font: 12px var(--mono); }
.pagination ul, .page-links { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style: none; }
.pagination a, .pagination .current, .page-links a, .page-links .current { display: inline-block; padding: .65rem .8rem; border-bottom: 1px solid var(--rule); }
.pagination .current, .page-links .current { color: var(--rubric); border-bottom-color: var(--rubric); }
.empty-state { padding-bottom: 2rem; }
.empty-state h2 { margin-top: 0; }
.preview-art img { display: block; max-width: 100%; height: auto; }
.search-form { margin: 1rem 0; }
.search-form label { display: block; margin-bottom: .5rem; }
.search-panel .close-search { border: 0; background: none; color: var(--ink-2); padding: .4rem 0; cursor: pointer; font: 12px var(--mono); }
.search-field button { border: 1px solid var(--rule); min-height: 44px; padding: .5rem .8rem; font: 12px var(--mono); }
.search-field button:hover { color: var(--rubric); }
.comments-area { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--ink); }
.comments-area h2, .comment-reply-title { font-size: 24px; font-weight: 500; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; padding-left: 1.2rem; }
.comment-body { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.comment-author { font-size: 14px; }
.comment-author .avatar { float: left; margin: .2rem .75rem .5rem 0; }
.comment-metadata, .reply, .comment-awaiting-moderation { font: 11px/1.7 var(--mono); color: var(--ink-3); }
.comment-content { font-size: 16px; clear: both; }
.bypostauthor > .comment-body { border-bottom-color: var(--rubric-dim); }
.comment-form label { display: block; font: 12px/1.6 var(--grot); }
.comment-form input:not([type=checkbox]), .comment-form textarea, .post-password-form input[type=password] { width: 100%; background: var(--plate); color: var(--ink); border: 1px solid var(--rule); padding: .65rem .75rem; font: inherit; }
.comment-form textarea { resize: vertical; }
.comment-form input[type=submit], .post-password-form input[type=submit] { width: auto; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); padding: .65rem 1rem; font: 12px var(--grot); cursor: pointer; }
.comment-form-cookies-consent label { display: inline; }
.comment-notes, .logged-in-as { font-size: 14px; color: var(--ink-2); }
.cat-head { border-bottom: 0; padding-bottom: 0; }
.catalogue-content { grid-column: 1 / -1; min-width: 0; }
.catalogue-content > p:first-child { max-width: 32rem; color: var(--ink-2); }
.catalogue-content > .wp-block-columns { gap: 2.6rem; margin-top: 2.6rem; padding-top: 2.4rem; border-top: 1px solid var(--ink); }
.catalogue-content .wp-block-column { min-width: 0; }
.catalogue-content h2 { margin-top: 0; padding-top: 0; padding-bottom: .5rem; border-top: 0; border-bottom: 1px solid var(--rule); }
.catalogue-content .wp-block-list { list-style: none; padding: 0; font-size: 14px; }
.catalogue-content li { padding: .3rem 0; }
.catalogue-content .feature-columns { border-top: 0; padding-top: 0; }
.catalogue-content .contact-columns { font-size: 14px; }
.footer-links { margin-left: auto; }
body.admin-bar .rail-sticky { top: calc(2.4rem + 32px); }
body[data-reader=true] .entry-content .alignwide, body[data-reader=true] .entry-content .alignfull, body[data-reader=true] .entry-content > .plate-block { width: 100%; }
body[data-reader=true] .is-style-margin-note { float: none; width: 100%; margin: .5rem 0 1.5rem; }
@media (max-width: 60rem) {
  .entry-content .alignwide, .entry-content .alignfull, .entry-content > .plate-block { width: 100%; }
  .is-style-margin-note { float: none; width: 100%; margin: .5rem 0 1.5rem; }
  .primary-menu .sub-menu .sub-menu { position: static; }
}
@media (max-width: 40rem) {
  .primary-menu { gap: .5rem 1.25rem; }
  .primary-menu .sub-menu { left: auto; right: 0; max-width: calc(100vw - 3rem); }
  .submenu-toggle { min-width: 36px; min-height: 40px; }
  .archive-head, .pagination, .empty-state { grid-column: 1 / -1; }
  .filter .count { margin-left: 0; }
  .filter a { min-height: 40px; }
  .post-navigation .nav-links { grid-template-columns: minmax(0, 1fr); }
  .post-navigation .nav-next { text-align: left; }
  .entry-content .alignleft, .entry-content .alignright { float: none; max-width: 100%; margin: 1rem 0; }
  .catalogue-content > .wp-block-columns { gap: 1.5rem; }
  .catalogue-content .wp-block-column + .wp-block-column { margin-top: 1rem; }
  .search-field { flex-wrap: wrap; gap: .5rem; }
  .footer-links { margin-left: 0; }
}
@media print {
  body { background: white; color: black; font-size: 12pt; }
  .dock, .search-panel, .masthead nav, .rail, .colophon, .post-navigation, .comment-respond, .pagination { display: none !important; }
  .sheet, .page-content { display: block; width: auto; padding: 0; }
  .essay { max-width: none; }
  .marginnote, .is-style-margin-note { float: none; width: auto; margin: .5rem 0 1rem; }
  .entry-content .alignwide, .entry-content .alignfull, .entry-content > .plate-block { width: 100%; }
}

/* The catalogue uses editable core blocks in the same plain composition. */
.catalogue-content .catalogue-lists li { display: flex; gap: .6rem; align-items: baseline; line-height: 1.42; color: var(--ink-2); }
.catalogue-lists .y { flex: none; width: 2.4rem; font: 11px var(--mono); color: var(--ink-3); }
.catalogue-lists .tag { margin-left: auto; font: 11px var(--mono); color: var(--ink-3); }
.catalogue-content .feature-columns { margin-top: 1rem; gap: 1.2rem; }
.feature-columns .wp-block-image { margin: 0 0 .85rem; border-bottom: 1px solid var(--rule); }
.feature-columns .wp-block-image img { display: block; width: 100%; }
.feature-columns p { margin: 0 0 .5rem; line-height: 1.34; font-size: 16.5px; }
.feature-columns .catalogue-meta { font: 11px/1.5 var(--mono); color: var(--ink-3); }
.catalogue-content .contact-columns { margin-top: 1.5rem; padding-top: 1.2rem; gap: 1.6rem; }
.contact-columns h2 { border: 0; margin: 0 0 .45rem; padding: 0; }
.contact-columns p { margin: 0; }
.recovery-heading { border: 0; margin-top: 2.4rem; padding-top: 0; }
.guess { margin: .6rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.guess li { padding: .65rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 16px; }
.guess .why { display: block; font: 11px/1.6 var(--mono); color: var(--ink-3); }
.entry-content .alignwide, .entry-content .alignfull { margin-left: 0; margin-right: 0; }
@media (max-width: 40rem) {
  .catalogue-content .feature-columns, .catalogue-content .contact-columns { gap: 1.2rem; }
}
/* User-entered titles and URLs can be longer than the demonstration copy. */
.article-header h1, .row .title, .garden-head h1, .cat-head h1, .index-title, .tree .leaf > span { overflow-wrap: anywhere; }

.catalogue-content { margin-top: calc(.9rem - var(--gutter)); }
.feature-columns .wp-block-image a { display: block; }
/* Keep catalogue metadata intact and reading tools outside the tablet content. */
.catalogue-lists .tag { flex: none; white-space: nowrap; }
.catalogue-lists li > a, .catalogue-lists li > span:not(.y):not(.tag) { min-width: 0; }
@media (max-width: 60rem) {
  .dock { position: static; width: 100%; border: 0; padding: 0; flex-direction: row; gap: .6rem; }
  .dock button { width: 44px; height: 44px; }
  .catalogue-content .catalogue-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue-lists .wp-block-column:last-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .catalogue-content .catalogue-lists { grid-template-columns: minmax(0, 1fr); }
}