
.sb { padding-top: 28px; }
.sb-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.sb-page { background: var(--surface); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--shadow); padding: clamp(18px, 3.4vw, 40px); max-width: 1000px; }
.sb-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; padding-bottom: 18px; border-bottom: 3px solid var(--ink); }
.sb-eyebrow { margin: 0 0 8px; font: 600 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--brand-text); }
.sb-h { margin: 0; font: 800 clamp(2.2rem, 5.4vw, 3.8rem)/.95 var(--display); font-variation-settings: "wdth" 84; font-stretch: 84%; letter-spacing: -.04em; }
.sb-h span { background: var(--sun); color: var(--fixed-ink); padding: 0 .1em; }
.sb-lead { margin: 12px 0 0; color: var(--brown); max-width: 60ch; }
.sb-ch { height: 132px; width: auto; }
.sb-grid { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sb-grid li { position: relative; padding: 14px 14px 14px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--field); break-inside: avoid; }
.sb-grid li.sb-no { border-style: dashed; }
.sb-grid > li:last-child:nth-child(3n+2) { grid-column: span 2; }
.sb-k { display: inline-block; font: 700 11px/1 var(--mono); padding: 4px 7px; border-radius: 99px; background: var(--sun); color: var(--fixed-ink); border: 1.5px solid var(--fixed-ink); }
.sb-grid h2, .sb-ai h2, .sb-extra h2 { margin: 8px 0 6px; font: 800 1.2rem/1.05 var(--display); font-variation-settings: "wdth" 84; font-stretch: 84%; letter-spacing: -.02em; }
.sb-grid p, .sb-ai p, .sb-extra li { margin: 0; color: var(--brown); font-size: .9rem; line-height: 1.45; }
.sb-ai, .sb-extra { margin-top: 16px; padding: 14px 16px; border: 2px dashed var(--muted); border-radius: 14px; break-inside: avoid; }
.sb-extra ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.sb-extra b { color: var(--ink); }
.sb-tag { display: inline-block; margin-right: 6px; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 4px 7px; border-radius: 99px; background: var(--sun); color: var(--fixed-ink); border: 1.5px solid var(--fixed-ink); vertical-align: 3px; }
.sb-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 12px; border-top: 2px solid var(--ink); font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
@media (max-width: 860px) { .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sb-grid > li:last-child:nth-child(3n+2) { grid-column: auto; } }
@media (max-width: 560px) { .sb-grid { grid-template-columns: minmax(0, 1fr); } .sb-head { grid-template-columns: minmax(0, 1fr); } .sb-ch { display: none; } }

@media print {
  @page { size: letter; margin: 12mm; }
  html, body { background: #fff !important; }
  .site-top, .site-foot, .skip, .sb-bar, .grain, .specks, .foot-crowd { display: none !important; }
  .sb { padding: 0 !important; background: #fff !important; }
  .sb .wrap { max-width: none; padding: 0; }
  .sb-page { border: 2px solid #17120F; box-shadow: none; border-radius: 14px; padding: 18px 20px; max-width: none; background: #fff; color: #17120F; }
  .sb-page * { animation: none !important; transition: none !important; }
  .sb-h { font-size: 34pt; }
  .sb-ch { height: 96px; }
  .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; margin-top: 12px; }
  .sb-grid > li:last-child:nth-child(3n+2) { grid-column: span 2 !important; }
  .sb-grid li { padding: 9px 10px; background: #F7F4EF; }
  .sb-grid h2, .sb-ai h2, .sb-extra h2 { font-size: 12pt; margin: 4px 0 3px; }
  .sb-grid p, .sb-ai p, .sb-extra li, .sb-lead { font-size: 9pt; line-height: 1.35; color: #3A2A20; }
  .sb-ai, .sb-extra { margin-top: 8px; padding: 8px 10px; }
  .sb-foot { margin-top: 10px; padding-top: 6px; }
  a { color: inherit; text-decoration: none; }
}
