/* The Good Cold — the invisible grid (prototype, 2026-10-26).
   4 columns (3 on "special" pages: body.bento-3). Rows are a square module:
   as tall as a column is wide, growing only when an image or copy needs it. */
.bento-page { --ink: #0e243a; --cream: #f8f6f0; --paper: #efe9dc; --red: #c8202f; --sun: #f2c84b; --sky: #d8e8f2; --rule: #d9d0bf; background: var(--cream); }
.bento { --cols: 4; --gap: 24px; --pad: clamp(16px, 4vw, 48px); --w: min(1360px, 100vw - var(--pad) * 2);
  --col: calc((var(--w) - var(--gap) * (var(--cols) - 1)) / var(--cols));
  width: var(--w); margin: 0 auto; padding: 24px 0 64px; }
.bento-3 .bento { --cols: 3; }
.bento-band { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(var(--col), auto); gap: var(--gap); margin-bottom: var(--gap); }
.bento-band + .bento-band { margin-top: calc(var(--gap) * 2.5); }

/* spans */
.bx { position: relative; min-width: 0; display: flex; flex-direction: column; padding: clamp(18px, 2vw, 28px); border-radius: 12px; color: var(--ink); text-decoration: none; }
.bx-c1 { grid-column: span 1; } .bx-c2 { grid-column: span 2; } .bx-c3 { grid-column: span 3; } .bx-c4 { grid-column: 1 / -1; }
.bx-r2 { grid-row: span 2; }
.bento-3 .bx-c4 { grid-column: 1 / -1; }

/* surfaces: some boxed, some bare type sitting on the page */
.bx-card { background: #fff; box-shadow: inset 0 0 0 1px #e5dfd3; }
.bx-bare { padding-left: 0; padding-right: 0; background: none; }
.bx-ink { background: var(--ink); color: var(--cream); }
.bx-sun { background: var(--sun); }
.bx-sky { background: var(--sky); }
.bx-photo { padding: 0; margin: 0; overflow: hidden; background: var(--paper); align-self: start; }
.bx-photo img { display: block; width: 100%; height: auto; } /* whole image, never cropped */

/* type */
.bx-kick { display: block; margin-bottom: 10px; font: 700 11px/1.25 'Public Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.bx-ink .bx-kick { color: var(--sun); }
.bx h1 { margin: auto 0 14px; font: 700 clamp(56px, 7.4vw, 124px)/.86 'Barlow Condensed', sans-serif; letter-spacing: -.01em; }
.bx h2 { margin: 0 0 14px; font: 700 clamp(32px, 3.4vw, 52px)/.95 'Barlow Condensed', sans-serif; text-wrap: balance; }
.bx h3 { margin: 0 0 8px; font: 700 clamp(22px, 1.9vw, 28px)/1 'Barlow Condensed', sans-serif; text-wrap: balance; }
.bx p { margin: 0 0 10px; font: 400 15.5px/1.55 'Public Sans', sans-serif; text-wrap: pretty; }
.bx-type { font-weight: 600 !important; font-size: 13px !important; color: #5a6b7c; }
.bx-ink .bx-type { color: #c9d6e2; }
.bx-foot { margin-top: auto !important; padding-top: 10px; border-top: 1px solid currentColor; border-color: rgba(14, 36, 58, .15); font-size: 13px !important; }
.bx-ink .bx-foot { border-color: rgba(248, 246, 240, .2); }
.bx-foot a { color: inherit; font-weight: 600; }
.bx-btn { align-self: flex-start; margin-top: 10px; padding: 11px 16px; border-radius: 12px; background: var(--sun); color: var(--ink); font: 700 14px/1 'Public Sans', sans-serif; text-decoration: none; }

/* specific modules */
.bx-title p { font-size: 17px; color: #d7e1ea; }
.bx-head { justify-content: flex-end; }
.bx-head h2 { font-size: clamp(36px, 3.6vw, 56px); }
.bx-essay { justify-content: center; }
.bx-essay p { font-size: 19px; line-height: 1.6; }
.bx-drop::first-letter { float: left; margin: 6px 10px 0 0; font: 700 78px/.8 'Barlow Condensed', sans-serif; color: var(--red); }
.bx-quote { justify-content: space-between; }
.bx-quote blockquote { margin: 0; font: 700 clamp(30px, 2.8vw, 44px)/.98 'Barlow Condensed', sans-serif; }
.bx-quote a { color: var(--ink); font-weight: 700; }
.bx-glance ul { list-style: none; margin: auto 0 0; padding: 0; }
.bx-glance li { padding: 10px 0; border-top: 1px solid var(--rule); font: 400 14.5px/1.4 'Public Sans', sans-serif; }
.bx-glance li b { display: block; font: 700 11px/1.2 'Public Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #5a6b7c; }
.bx-choice { background: var(--paper); transition: transform .18s ease, background .18s ease; }
.bx-choice img { width: 46px; height: 46px; margin-bottom: auto; }
.bx-choice h3 { margin-top: 18px; }
.bx-choice:hover { background: var(--sun); transform: rotate(-1deg) translateY(-3px); }
.bx-choice:nth-child(even):hover { transform: rotate(1deg) translateY(-3px); }
.bx-sat { justify-content: flex-end; background: var(--ink) radial-gradient(circle at 85% 15%, rgba(242, 200, 75, .25), transparent 45%); }
.bx-sat h2 { font-size: clamp(40px, 4.6vw, 72px); }
.bx-sat p { font-size: 18px; max-width: 60ch; color: #dfe7ee; }
.bx-recipe { background: #fbf3d6; box-shadow: none; }
.bx-hand { font: 500 17px/1.55 'Shantell Sans', 'Public Sans', cursive !important; }
.bx-tale { justify-content: center; }
.bx-tale h2 { font-size: clamp(44px, 5vw, 80px); color: var(--ink); }
.bx-tale p { font-size: 20px; line-height: 1.6; max-width: 62ch; }
.band-night { padding: var(--gap); margin-left: calc(var(--gap) * -1); margin-right: calc(var(--gap) * -1); border-radius: 12px; background: #091827; }
.band-night .bx-photo { background: #091827; }
.bx-step { background: none; padding-left: 0; padding-right: 8px; border-top: 3px solid var(--ink); border-radius: 0; }
.bx-n { font: 700 72px/.8 'Barlow Condensed', sans-serif; color: var(--sun); -webkit-text-stroke: 1.5px var(--ink); margin: 14px 0 10px; }
.bx-sun ol { margin: 0; padding-left: 20px; font: 400 15px/1.5 'Public Sans', sans-serif; }
.bx-sun ol li { margin-bottom: 8px; }
.bx-date { background: var(--red); color: #fff; }
.bx-date .bx-kick { color: #ffd9d9; }
.bx-when { font: 700 20px/1.1 'Barlow Condensed', sans-serif !important; }
.bx-goods, .bx-people { padding: 0; overflow: hidden; background: var(--paper); }
.bx-goods img { display: block; width: 100%; height: auto; }
.bx-goods .bx-kick, .bx-goods h3, .bx-goods p { padding: 0 20px; }
.bx-goods .bx-kick { margin-top: 16px; }
.bx-people { flex-direction: row; align-items: stretch; }
.bx-people img { width: 50%; height: auto; object-fit: contain; align-self: center; }
.bx-people > span { display: flex; flex-direction: column; justify-content: center; padding: 22px; }
.bx-custom p { font: 500 italic clamp(20px, 1.8vw, 26px)/1.35 'Public Sans', sans-serif; }
.bx-goods:hover, .bx-people:hover { background: #e9e0cc; }
.bento-sources { margin-top: 40px; font: 400 13px/1.6 'Public Sans', sans-serif; color: #5a6b7c; }
.bento-sources a { color: inherit; }

/* phones: two columns; wide modules take the full row */
@media (max-width: 760px) {
  .bento { --cols: 2; --gap: 14px; }
  .bento-band { grid-auto-rows: minmax(calc(var(--col) * .9), auto); }
  .bx-c2, .bx-c3, .bx-c4 { grid-column: 1 / -1; }
  .bx-r2 { grid-row: span 1; }
  .bx-title { grid-column: 1 / -1; }
  .bx h1 { font-size: 64px; }
  .bx p { font-size: 14.5px; }
  .bx-people { flex-direction: column; } .bx-people img { width: 100%; }
}
.bx-title h1 { font-size: min(124px, calc(var(--col) * 1.55 / var(--len, 8))); overflow-wrap: anywhere; }
.bx-ink h1, .bx-ink h2, .bx-ink h3 { color: var(--cream) !important; }
.bx h1, .bx h2, .bx h3 { color: inherit; }
.band-night { margin-left: 0; margin-right: 0; }
.bento { overflow-x: clip; }

/* v2: museum labels in mono, stories in the serif, more air between bands */
.bento { --band-space: calc(var(--gap) * 4); }
.bento-band + .bento-band { margin-top: var(--band-space); }
.bx-kick { font: 500 11.5px/1.3 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .08em; }
.bx-type, .bx-foot, .bx-when, .bento-sources { font-family: 'Red Hat Mono', ui-monospace, monospace !important; letter-spacing: .01em; }
.bx-when { font-size: 15px !important; font-weight: 600 !important; }
.bx-essay p, .bx-tale p, .bx-people p, .bx-custom p, .bx-sat p { font-family: 'Buenard', Georgia, serif !important; font-style: normal; }
.bx-essay p { font-size: 21px; line-height: 1.55; }
.bx-tale p { font-size: 22px; line-height: 1.55; }
.bx-custom p { font-size: clamp(22px, 2vw, 28px); line-height: 1.35; }
.bx-hand { font-family: 'Shantell Sans', cursive !important; }

/* ---- Phone system v2: one reading column, small things pair up ---- */
@media (max-width: 760px) {
  .bento { --gap: 12px; --band-space: 56px; padding-top: 12px; }
  .bento-band { grid-auto-rows: auto; }
  .bento-band > .bx { grid-column: 1 / -1 !important; min-height: 0; }
  .bento-band > .bx-choice, .bento-band > .bx-date { grid-column: span 1 !important; }
  .bx { padding: 18px; }
  .bx-bare { padding: 4px 0; }
  .bx h2 { font-size: 34px; } .bx-sat h2, .bx-tale h2 { font-size: 40px; }
  .bx-title h1 { font-size: min(72px, calc(100vw / var(--len, 8) * 1.45)); }
  .bx-essay p, .bx-tale p { font-size: 18px; }
  .bx-head { padding-bottom: 0; } .bx-head h2 { font-size: 40px; margin: 0; }
  .bx-quote { min-height: 0; } .bx-quote blockquote { font-size: 32px; margin-bottom: 18px; }
  .bx-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding-top: 14px; }
  .bx-step .bx-n { grid-row: 1 / span 4; margin: 0; font-size: 56px; }
  .bx-glance ul { margin-top: 6px; } .bx-glance li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
  .bx-choice h3 { font-size: 20px; margin-top: 12px; } .bx-choice p { font-size: 13.5px; }
  .bx-choice img { width: 36px; height: 36px; }
  .bx-date h3 { font-size: 19px; } .bx-date p:not(.bx-when) { display: none; }
  .bx-photo { border-radius: 12px; }
  .band-night { padding: 12px; }
  .bx-people { flex-direction: column; } .bx-people img { width: 100%; }
  .bx-foot { font-size: 12.5px !important; }
}

/* ---- Wayfinding strip v2 (replaces the pill row): a museum floor directory ---- */
.bento > .tp-jumps { position: sticky; top: 0; z-index: 30; max-width: none; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 0; display: flex; flex-wrap: nowrap; gap: 0; background: #f8f6f0; border-top: 1px solid #0e243a; border-bottom: 1px solid #d9d0bf; overflow-x: auto; scrollbar-width: none; box-shadow: none; }
.tp-jumps::-webkit-scrollbar { display: none; }
.tp-jumps::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--read, 0) * 100%); background: #c8202f; transition: width .1s linear; }
.tp-jumps a, .tp-jumps .tp-print { flex: 1 1 0; min-width: max-content; display: flex; align-items: baseline; gap: 10px; padding: 14px 22px 13px !important; margin: 0 !important; border: 0 !important; border-right: 1px solid #d9d0bf !important; border-radius: 0 !important; background: transparent !important; color: #0e243a !important; font: 700 18px/1 'Barlow Condensed', sans-serif !important; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; transition: background .15s ease; }
.tp-jumps a::before, .tp-jumps .tp-print::before { content: attr(data-n); font: 500 11px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .06em; color: #8a97a4; }
.tp-jumps a:hover, .tp-jumps .tp-print:hover { background: #efe9dc !important; }
.tp-jumps a[aria-current="true"] { background: #0e243a !important; color: #f8f6f0 !important; }
.tp-jumps a[aria-current="true"]::before { color: #f2c84b; }
.tp-jumps .tp-print { flex: 0 0 auto; margin-left: auto !important; border-right: 0 !important; font-size: 15px !important; }
.tp-jumps .tp-print::before { content: '↓'; font-size: 13px; color: #c8202f; }
@media (max-width: 760px) {
  .bento > .tp-jumps { position: sticky; top: 0; }
  .tp-jumps a, .tp-jumps .tp-print { flex: 0 0 auto; padding: 13px 16px 12px !important; font-size: 16px !important; }
}
@media (min-width: 761px) { .bento > .tp-jumps { padding-right: 84px; } }

.bento > .tp-jumps { margin-bottom: 56px; }
@media (max-width: 760px) { .bento > .tp-jumps { margin-bottom: 32px; } }
.bx-air { padding: 0; background: none; } @media (max-width: 760px) { .bx-air { display: none; } }

/* =============================================================================
   Town pages on the grid (v10, 2026-10-26): every town edition, generated or
   hand-built, is written by design/build-towns.py into these modules.
   ============================================================================= */
.bento > :is(.bento-band, .bento-sec) + :is(.bento-band, .bento-sec) { margin-top: var(--band-space); }
.bento > .bento-sec > .bento-band { margin-bottom: 0; }
.bx-title h1 { font-size: min(124px, calc((var(--col) * var(--span, 1) + var(--gap) * (var(--span, 1) - 1)) * 1.55 / var(--len, 8))); }
.bx-title { justify-content: flex-end; }
.bx-title .tp-deck { font-size: 17px; line-height: 1.5; color: #d7e1ea; max-width: 46ch; }
.bx-title .page-save { align-self: flex-start; margin-top: 12px; }
.bx-cover { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.bx-cover img { max-height: 100%; }
.bx-head h2 { overflow-wrap: break-word; }
.bx-head .tp-fine, .bx-head .bx-more { margin-top: auto; }
.bx-more { align-self: flex-start; margin-top: 14px; color: var(--ink); font: 600 14px/1.3 'Public Sans', sans-serif; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.bx-essay-h { font-size: clamp(34px, 3.4vw, 52px) !important; margin-bottom: 18px !important; }
.bx-quote blockquote { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.05; }
.bx-contents ol { list-style: none; margin: auto 0 0; padding: 0; }
.bx-contents li a { display: block; padding: 9px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; font: 600 15px/1.3 'Public Sans', sans-serif; }
.bx-contents li a:hover { color: var(--red); }
.bx-contents small { display: block; margin-bottom: 3px; font: 500 10.5px/1.2 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.bx-contents .tp-when { display: block; font: 400 12.5px/1.3 'Red Hat Mono', ui-monospace, monospace; font-style: normal; color: #5a6b7c; }
.band-cover .bx-contents { background: #fff; }
.bx-day p { font: 400 20px/1.5 'Buenard', Georgia, serif !important; }
.bx-day.bx-ink p { color: #e4ebf1; }
.bx-sat2 p { font-size: 15px; }

/* the three-option unit */
.tp-trio-grid { display: contents; list-style: none; margin: 0; padding: 0; }
.tp-place { list-style: none; }
.tp-place .tp-n { font: 500 12px/1 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .08em; color: var(--red); margin-bottom: 12px; }
.bx-ink.tp-place .tp-n { color: var(--sun); }
.tp-place-in { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tp-place h4 { margin: 0 0 8px; font: 700 clamp(22px, 1.9vw, 28px)/1 'Barlow Condensed', sans-serif; text-wrap: balance; color: inherit; }
.bx-c2.tp-place h4, .bx-c3.tp-place h4 { font-size: clamp(28px, 2.6vw, 38px); }
.bx-c3.tp-place p:not(.tp-where):not(.tp-meta) { font: 400 19px/1.55 'Buenard', Georgia, serif; max-width: 60ch; }
.tp-meta { margin: 0 0 10px !important; font: 500 12.5px/1.4 'Red Hat Mono', ui-monospace, monospace !important; letter-spacing: .01em; color: #5a6b7c; }
.bx-ink .tp-meta { color: #c9d6e2; }
.tp-where { margin: auto 0 0 !important; padding-top: 6px; border-top: 1px solid rgba(14, 36, 58, .15); font: 400 13px/1.35 'Red Hat Mono', ui-monospace, monospace !important; }
.bx-ink .tp-where { border-color: rgba(248, 246, 240, .2); }
.tp-where { line-height: 2.1 !important; }
.tp-where a { display: inline; padding: 13px 0; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(14, 36, 58, .25); text-underline-offset: 3px; }
.bx-ink .tp-where a { text-decoration-color: rgba(248, 246, 240, .35); }
.tp-where a:hover { text-decoration-color: var(--red); }
.tp-night > .bento-band { padding: var(--gap); border-radius: 12px; background: var(--night, #091827); }
.tp-night .bx-head { color: var(--cream); } .tp-night .bx-head .bx-kick { color: var(--sun); }
.bx-ink.tp-place { background: #132c45; }
.tp-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; margin: 16px 0 0 auto; padding: 12px 20px; border-radius: 12px; box-shadow: inset 0 0 0 1px currentColor; color: var(--ink); text-decoration: none; max-width: 520px; }
.tp-next small { font: 500 11px/1.2 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.tp-next span { grid-column: 1; font: 700 20px/1.1 'Barlow Condensed', sans-serif; }
.tp-next b { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; }
.tp-next:hover { background: var(--sun); box-shadow: none; }
.tp-next-cell { list-style: none; display: flex; grid-column: span 1; min-width: 0; }
.tp-next-card { flex: 1; max-width: none; margin: 0; grid-template-columns: 1fr; align-content: end; padding: 22px; border: 2px dashed currentColor; box-shadow: none; }
.tp-next-card b { grid-column: 1; grid-row: auto; font-size: 34px; justify-self: start; }
.tp-night .tp-next-card { color: var(--cream); } .tp-night .tp-next-card small { color: var(--sun); } .tp-night .tp-next-card:hover { color: var(--ink); }
.tp-night > .tp-next { display: grid; }

/* store still lifes and the store strip */
.bx-still { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 0; color: var(--ink); }
.bx-still figure { margin: 0; border-radius: 12px; overflow: hidden; background: var(--paper); transform: rotate(-1.2deg); box-shadow: 0 14px 30px -18px rgba(14, 36, 58, .55); transition: transform .2s ease; }
.bx-still figure img { display: block; width: 100%; height: auto; }
.bx-still:hover figure { transform: rotate(0) translateY(-3px); }
.bx-still strong { display: block; margin: 0 0 8px; font: 700 30px/1 'Barlow Condensed', sans-serif; text-wrap: balance; }
.bx-still em { display: block; font: 400 19px/1.5 'Buenard', Georgia, serif; font-style: normal; }
.bx-still b, .bx-goods b { display: inline-block; margin-top: 12px; font: 600 13.5px/1 'Public Sans', sans-serif; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.bx-goods > span { display: flex; flex-direction: column; padding: 16px 20px 20px; }
.bx-goods strong { display: block; margin-bottom: 6px; font: 700 24px/1 'Barlow Condensed', sans-serif; }
.bx-goods > span > span { font: 400 15px/1.5 'Public Sans', sans-serif; }
.bx-goods .bx-kick { padding: 0; margin-top: 0; }

/* tale, hunt, customs, dates, sources */
.bx-tale .tp-fine, .tp-fine { font: 400 13px/1.5 'Red Hat Mono', ui-monospace, monospace !important; color: #5a6b7c; }
.tp-fine a { color: inherit; }
.bx-hunt h3 { font-size: 24px; } .bx-hunt ol { margin: 0; padding-left: 20px; font: 400 15px/1.5 'Public Sans', sans-serif; } .bx-hunt li { margin-bottom: 8px; }
.bx-custom { margin: 0; justify-content: center; }
.bx-custom p { font: 400 clamp(26px, 2.6vw, 38px)/1.3 'Buenard', Georgia, serif !important; }
.bx-list ul { margin: 0; padding-left: 18px; font: 400 15px/1.5 'Public Sans', sans-serif; } .bx-list li { margin-bottom: 10px; }
.bx-date .bx-when { margin-bottom: 8px !important; }
.bx-date p { font-size: 14.5px; }
.bx-date .tp-where { border-color: rgba(255, 255, 255, .3); }
.bx-date .tp-where a { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
.bx-sources p { font: 400 13px/1.6 'Red Hat Mono', ui-monospace, monospace !important; color: #5a6b7c; }
.bx-sources b { color: var(--ink); }

/* the hand-built editions' own chapters */
.bx-legacy img { display: block; max-width: 100%; width: 100%; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; border-radius: 12px; margin: 0 0 14px; position: static !important; }
.bx-legacy figure { margin: 0 0 14px; } .bx-legacy figcaption { font: 400 12px/1.4 'Red Hat Mono', ui-monospace, monospace; color: #5a6b7c; }
.bx-legacy > span:first-child, .bx-legacy .eyebrow, .bx-legacy .chapter-label { display: block; margin-bottom: 10px; font: 500 11.5px/1.3 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.bx-legacy h2 { font: 700 clamp(32px, 3.4vw, 52px)/.95 'Barlow Condensed', sans-serif; margin: 0 0 14px; }
.bx-legacy h3 { margin: 0 0 8px; font: 700 clamp(22px, 1.9vw, 28px)/1 'Barlow Condensed', sans-serif; text-wrap: balance; }
.bx-legacy a { color: inherit; font-weight: 600; }
.bx-legacy details { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(14, 36, 58, .15); font: 400 13.5px/1.5 'Public Sans', sans-serif; }
.bx-legacy summary { cursor: pointer; font: 500 12px/1.3 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .04em; min-height: 32px; display: flex; align-items: center; }
.bx-legacy .place-info-trigger { display: inline-flex; align-items: center; min-height: 44px; }
.bx-legacy.bx-notes { min-height: 0; font: 400 13px/1.5 'Public Sans', sans-serif; color: #5a6b7c; }
/* a heading or notes strip runs the full width at its own height; the modules beside it keep the square */
.bento-band:has(> .bx-strip) { grid-auto-rows: auto; }
.bento-band:has(> .bx-strip) > .bx:not(.bx-strip) { min-height: var(--col); }
.bx-strip { min-height: 0; padding-top: 0; padding-bottom: 0; }
.bx-head.bx-strip:not(.bx-legacy) { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 24px; }
.bx-head.bx-strip .bx-kick { flex-basis: 100%; }
.bx-head.bx-strip.bx-legacy > p { max-width: 64ch; }
.bx-head.bx-strip .bx-more { margin: 0 0 0 auto; }
.bx-fiction { justify-content: center; }
.bx-fiction p { font: 400 20px/1.55 'Buenard', Georgia, serif; }
.bx-fiction h2 { font-size: clamp(36px, 3.8vw, 58px); }
.bx-people > a { flex: 0 0 45%; display: flex; align-items: center; }
.bx-people > a img { width: 100%; margin: 0; border-radius: 0; }
.bx-people > div { display: flex; flex-direction: column; justify-content: center; padding: 22px; font: 400 15px/1.5 'Buenard', Georgia, serif; }
.bx-people > div > :is(span, p, small) { display: block; margin: 0 0 6px; }
.bx-goods.bx-legacy > div { padding: 16px 20px 20px; }
.bx-goods.bx-legacy > a img, .bx-goods.bx-legacy > img { border-radius: 0; margin: 0; }
.bx-goods.bx-legacy small { display: block; margin-top: 8px; font: 400 12px/1.4 'Red Hat Mono', ui-monospace, monospace; color: #5a6b7c; }

/* previous / next town */
.town-bento .page-turns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: min(1360px, 100vw - clamp(16px, 4vw, 48px) * 2); margin: 0 auto 64px; }
.town-bento .page-turns a { display: block; padding: 18px 0; border-top: 3px solid var(--ink); color: var(--ink); text-decoration: none; }
.town-bento .page-turns a[rel="next"] { text-align: right; }
.town-bento .page-turns small { display: block; font: 500 11.5px/1.3 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.town-bento .page-turns strong { font: 700 clamp(26px, 3vw, 40px)/1 'Barlow Condensed', sans-serif; }

/* phones: one reading column; only the small icon tiles pair up */
@media (max-width: 760px) {
  .bento-band .bx, .tp-next-cell { grid-column: 1 / -1 !important; min-height: 0; }
  .bento-band > .bx-choice { grid-column: span 1 !important; }
  .bento-band > .bx-date { grid-column: 1 / -1 !important; }
  .bx-date p:not(.bx-when) { display: block; }
  .tp-night > .bento-band { padding: 12px; }
  .bx-title { min-height: 0; }
  .bx-title h1 { font-size: min(72px, calc((100vw - 68px) / var(--len, 8) * 1.6)); }
  .bx-still { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; } .bx-still strong { font-size: 22px; } .bx-still em { font-size: 16px; }
  .bx-custom p { font-size: 24px !important; }
  .bx-fiction p, .bx-day p { font-size: 18px !important; }
  .tp-next { max-width: none; margin-left: 0; }
  .tp-next-card { padding: 16px 18px; } .tp-next-card b { font-size: 24px; }
  .bx-people { flex-direction: column; } .bx-people > a { flex: none; }
  .bx-c3.tp-place p:not(.tp-where):not(.tp-meta) { font-size: 17px; }
  .town-bento .page-turns { gap: 12px; } .town-bento .page-turns strong { font-size: 24px; }
}

/* the pocket guide: print any town edition as a plain, ink-friendly list */
@media print {
  @page { margin: 14mm; }
  .site-header, .mega-header, .tgc-bar, .tp-jumps, .page-turns, .tgc-foot, .bx-goods, .bx-still, .bx-photo, .bx-air, .skip, .tp-print, .tp-margin, .tp-next, .bx-people, .page-save, dialog { display: none !important; }
  .bento { width: auto; padding: 0; }
  .bento * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .bento-band { display: block !important; margin: 0 0 8mm !important; padding: 0 !important; }
  .bx { display: block; padding: 0 0 3mm !important; break-inside: avoid; min-height: 0 !important; }
  .bx-title h1 { font-size: 34pt !important; }
  .bx h2 { font-size: 18pt !important; }
}
.bx-calnote { justify-content: flex-end; }
@media (max-width: 760px) { .bento-band:has(> .bx-strip) > .bx:not(.bx-strip) { min-height: 0; } .bento-band:has(> .bx-strip) > .bx-choice { min-height: 0; } .bx-head.bx-strip .bx-more { margin: 8px 0 0; } }
/* a portrait town photo: two columns, two rows, the day plans stacked beside it */
.band-portrait > .bx-photo[data-rows="2"] { grid-row: 1 / span 2; }
.band-portrait > .bx-photo[data-side="l"] { grid-column: 1 / span 2; }
.band-portrait > .bx-photo[data-side="r"] { grid-column: 3 / span 2; }
.band-portrait > .bx-photo[data-side="r"] ~ .bx { grid-column: 1 / span 2; }
.band-portrait > .bx-photo[data-side="l"] ~ .bx { grid-column: 3 / span 2; }
@media (max-width: 760px) {
  .band-portrait > .bx-photo, .band-portrait > .bx-photo ~ .bx { grid-column: 1 / -1 !important; grid-row: auto !important; }
  /* on a phone the heading always leads its band */
  .bento-band > .bx-head { order: -1; }
}
.bx-caption { align-self: end; padding: 0 0 6px; }
.bx-caption p { margin: 6px 0 0; font: 400 17px/1.5 'Buenard', Georgia, serif; color: #33475b; max-width: 30ch; }
.tp-photo .bx-photo img { border-radius: 12px; }
/* arriving from a menu or link: the exact place is marked */
.tp-place[id], [id="tale"], [id="table"] { scroll-margin-top: 140px; }
.tp-place:target { outline: 3px solid #f2c84b; outline-offset: 4px; animation: tgc-here 2.4s ease-out 1; }
@keyframes tgc-here { 0% { outline-color: #c8202f; } 100% { outline-color: #f2c84b; } }
/* day/night pairs on town pages */
.bx-pair { position: relative; }
.bx-pair .bx-pair-hint { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 10px; border-radius: 12px; background: rgba(14,36,58,.78); color: #f8f6f0; font: 500 12px/1.2 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .04em; pointer-events: none; white-space: nowrap; }
@media (max-width: 760px) { .bx-pair .bx-pair-hint { font-size: 11px; left: 8px; bottom: 8px; } }