.bridge-intro { max-width: 850px; padding: 32px 0 40px; }
.bridge-intro h1 { font-size: clamp(2.2rem, 4vw, 3.7rem); max-width: 760px; line-height: 1.12; }
.bridge-stats, .bridge-themes { display: flex; flex-wrap: wrap; gap: 10px; }
.bridge-stats { margin: 26px 0; }
.bridge-stats span, .bridge-themes span { padding: 7px 12px; border: 1px solid #d4b56d50; border-radius: 30px; color: #efd798; font-size: .84rem; }
.bridge-filters { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; padding: 24px; background: #171815; border: 1px solid #d4b56d40; border-radius: 14px; }
.bridge-filters[hidden], .bridge-card[hidden] { display: none; }
.bridge-filters label { display: grid; gap: 8px; color: #e8e3d8; }
.bridge-filters input, .bridge-filters select { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border: 1px solid #817860; border-radius: 6px; background: #0b0d0e; color: #faf4e4; font: inherit; }
.bridge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 26px 0 46px; }
.bridge-card { scroll-margin-top: 40px; padding: 26px; background: linear-gradient(145deg, #181c1a, #101316); border: 1px solid #c4a85d44; border-radius: 16px; min-width: 0; }
.bridge-card h2 { margin: 4px 0 8px; font-size: 1.75rem; }.bridge-card h3 { font-size: 1.12rem; }.bridge-card p, .bridge-card li { color: #d9d7d0; line-height: 1.7; }.bridge-byline { font-size: .9rem; }.bridge-themes { margin: 20px 0; }
.bridge-book { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid #f5d78b20; }.bridge-book h3 { margin: 0 0 8px; }.bridge-book p { margin: 0 0 10px; }.bridge-cover img { width: 75px; height: auto; border-radius: 5px; }.bridge-book a, .bridge-next a { color: #efd08e; }.bridge-book-link { font-size: .92rem; }
.bridge-card details { border: 1px solid #ddd2b22a; border-radius: 8px; padding: 12px 15px; margin: 14px 0 20px; }.bridge-card summary { cursor: pointer; color: #eadfca; }.bridge-card details p { font-size: .9rem; }.bridge-card details a { overflow-wrap: anywhere; }
.bridge-atlas-link { display: inline-block; color: #efd08e; font-weight: 600; }.bridge-next { border-top: 1px solid #d4b56d40; padding-top: 24px; }
@media (max-width: 760px) { .bridge-grid, .bridge-filters { grid-template-columns: 1fr; }.bridge-card { padding: 20px; }.bridge-book { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }.bridge-cover img { width: 60px; } }