/* Bonsai Kitten 2026: on top of /css/gatti.css (same look as the Italian remake).
   Original texts, new layout. Only what bonsaikitten.com needs beyond gatti.it. */
body.bk { background-image: url(../backcat.jpg); background-size: auto min(80vh, 760px); }
@media (prefers-color-scheme: dark) { body.bk { background-image: none; } }

.masthead .brand img { width: 147px; border-radius: 6px; }
.topnav .mini img { height: 30px; }
.topnav .throb { width: 25px; height: 9px; vertical-align: middle; margin-left: .2rem; image-rendering: pixelated; }

main h1 { margin-top: .1em; }
main h2 { margin-top: 1.4em; }
main > h2:first-child, main > .center:first-child h1 { margin-top: 0; }
main ul, main ol { padding-left: 1.4rem; }
main li { margin: .35em 0; }
main li::marker { color: var(--mag-ink); }
main hr { border: 0; border-top: 1px dashed var(--line); margin: 2rem 0; }
main pre {
  white-space: pre-wrap; word-break: break-all; font: .85rem/1.5 var(--mono);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; text-align: left;
}
main blockquote { margin: 0 0 1rem; padding: .25rem 0 .25rem 1.1rem; border-left: 4px solid var(--mag-ink); text-align: left; }
.center { text-align: center; }
.fs-l { font-size: 1.3em; }
.fs-m { font-size: 1.12em; }
.hl { color: var(--red); }
.hl-blue { color: #3366ff; }
@media (prefers-color-scheme: dark) { .hl-blue { color: #7fa0ff; } }
.h3p { font: 600 1.12rem/1.5 var(--serif); }
img.ico { vertical-align: middle; }
a.zoom { display: inline-block; cursor: zoom-in; line-height: 0; }
a.zoom img, .tbl img { border-radius: 10px; box-shadow: var(--shadow); }
a.zoom:hover img { transform: scale(1.02); transition: transform .2s; }

/* generic old layout tables -> responsive rows */
.tbl { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
.tbl .tr { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }
.tbl .td { flex: 1 1 16rem; min-width: 0; }
.tbl .td.pic { flex: 0 1 auto; text-align: center; margin: 0 auto; }
.tbl .td > :last-child { margin-bottom: 0; }
.tbl .tbl { margin: 0; }
.tbl.tint { background: var(--cat-2); border-radius: calc(var(--radius) + 6px); padding: clamp(1rem, 3vw, 1.75rem); }

/* gallery pages: caption + photo cards */
.tbl.steps { gap: 1.25rem; }
.tbl.steps .tr {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1rem, 3vw, 1.5rem); align-items: center;
}
.tbl.steps .td { text-align: left; }
.tbl.steps .td.pic { flex: 0 1 auto; }

/* catalog (vessels/tools): text first in the DOM, picture shown on top */
.item .pics { order: -1; }
.catalog .head { grid-template-areas: "t h"; grid-template-columns: 1fr auto; }
.item .code { margin-bottom: .2rem; }
.item .desc + .desc { margin-top: .5rem; }
.item .pics a.nopic {
  font: 700 .9rem/1.4 var(--mono); text-align: center; color: #b0009f; cursor: pointer; text-decoration: none;
}

/* guestbook, maildrop, techniques: one card per letter */
main.letters .card { margin-bottom: 1.25rem; }
main.letters .card.intro { text-align: center; }
main.letters .card.letter, main.letters .card.letter .center { text-align: left; }
main.letters .card p:last-child { margin-bottom: 0; }

/* white.html: the fake 403 */
.forbidden { border: 4px double var(--red); border-radius: 10px; padding: 1.25rem 1.75rem; max-width: 36rem; }
.forbidden h1 { color: var(--red); }

/* old pages wrapped whole sections in <CENTER>: keep blocks of prose left-aligned */
.center .catalog, .center .tbl.steps, .center .tbl.tint, .center blockquote, .center ul, .center ol { text-align: left; }
.topnav li:has(.throb) { display: flex; align-items: center; }
.topnav li:has(.throb) .throb { margin-left: -.55rem; margin-right: .3rem; }