.page-visual-branding { --vb-rust: #b65b35; --vb-rust-ink: #9a4a28; }
.page-visual-branding .p-title, .page-visual-branding .p-open .facts { grid-column: 1 / -1; }   
.page-visual-branding .p-title h1 { max-width: 13em; }
.page-visual-branding .p-open .facts { grid-template-columns: minmax(0, .7fr) minmax(0, 1.2fr) minmax(0, 1.9fr) minmax(0, 1fr); }
.page-visual-branding .p-open .links { grid-column: 1 / -1; }
.vb-line { display: block; }
.vb-line + .vb-line { margin-top: 4px; }
.vb-sub { margin-top: 16px; font: 400 clamp(22px, 2.3vw, 32px)/1.2 var(--display); letter-spacing: -.01em; color: var(--ink-2); }
.vb-readings, .vb-mirrors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; margin-top: 40px; }
.vb-readings li, .vb-mirrors li { padding-top: 12px; border-top: 1px solid var(--ink); font-size: 15px; line-height: 1.5; }
.vb-readings b, .vb-mirrors b { display: block; font-weight: 500; }
.vb-readings span, .vb-mirrors span { display: block; margin-top: 6px; color: var(--ink-2); }
.vb-city { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 32px var(--gap); align-items: start; margin-top: 64px; }
.vb-city .tall { grid-row: 1 / span 2; }
.vb-cc { display: block; margin-top: 4px; font-size: 12.5px; }      
.vb-cc a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.vb-table { margin-top: 44px; }
.vb-scroll { overflow-x: auto; }
.vb-scroll:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }
.vb-table table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.vb-table th, .vb-table td { padding: 10px 16px 11px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.vb-table thead th { font-weight: 400; font-size: 13px; color: var(--ink-2); border-bottom-color: var(--ink); }
.vb-table tbody th, .vb-table tbody td:nth-child(2) { font-weight: 500; }
.vb-regimes { margin-top: 72px; }
.vb-regime { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--gap); align-items: start;
  padding: 28px 0 36px; border-top: 1px solid var(--rule); }
.vb-regime:not(.has-fig) .vb-regime-text { grid-column: 1 / -1; }
.vb-op { font-size: 13px; color: var(--ink-2); }
.vb-regime h3 { margin-top: 6px; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--display); }
.vb-regime-text > p:last-child { max-width: 34em; margin-top: 12px; font-size: 15.5px; line-height: 1.6; }
.vb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
.vb-steps li { position: relative; padding: 16px 16px 18px; border: 1px solid var(--ink); font-size: 14px; line-height: 1.45; }
.vb-steps li:nth-child(2) { border-color: var(--vb-rust); }
.vb-steps li + li::before { content: "→"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.vb-steps .n { display: block; font: 500 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.vb-steps li:nth-child(2) .n { color: var(--vb-rust-ink); }
.vb-steps b { display: block; margin-top: 10px; font-size: 15px; font-weight: 500; }
.vb-steps li > span:last-child { display: block; margin-top: 6px; color: var(--ink-2); }
.vb-note { max-width: 46em; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.vb-quote { max-width: 30em; margin: 48px 0 0; padding-left: 22px; border-left: 2px solid var(--ink); }
.vb-quote p { font: 400 clamp(22px, 2.2vw, 30px)/1.35 var(--display); letter-spacing: -.005em; }
.vb-question { max-width: 40em; margin-top: 28px; font-size: 17px; line-height: 1.6; }
@media (max-width: 1000px) {
  .page-visual-branding .p-open .facts, .vb-readings, .vb-mirrors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-visual-branding .p-open .f-fieldwork { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .vb-city { grid-template-columns: minmax(0, 1fr); }
  .vb-city .tall { grid-row: auto; max-width: 480px; }
  .vb-regime { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .vb-steps { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .vb-steps li + li::before { content: "↓"; left: 50%; top: -23px; transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .page-visual-branding .p-open .facts, .vb-readings, .vb-mirrors { grid-template-columns: minmax(0, 1fr); }
}
