/* ============================================================
   TRENCHPORT CITY GUIDE
   Shared by /trenchport/city/, /rules/, /lore/, and /laws/.
   ============================================================ */

.city-page-title p{max-width:940px;margin-inline:auto}
.city-hero{margin:0 0 26px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#090909;box-shadow:0 20px 42px rgba(0,0,0,.36)}
.city-hero img{display:block;width:100%;aspect-ratio:16/5;object-fit:cover;object-position:center}
.city-section-nav{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 24px;padding:14px;border:1px solid rgba(255,255,255,.10);background:#0d0d0d}
.city-section-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 15px;border:1px solid rgba(255,255,255,.13);background:#131313;color:#d8d1c8;text-decoration:none;font-size:.79rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.city-section-nav a:hover,.city-section-nav a.is-active{border-color:rgba(215,122,45,.76);background:rgba(215,122,45,.14);color:#fff}
.city-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:26px}
.city-card{overflow:hidden;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#171717,#0e0e0e);box-shadow:0 15px 32px rgba(0,0,0,.28)}
.city-card img{display:block;width:100%;aspect-ratio:16/5;object-fit:cover;object-position:center;border-bottom:1px solid rgba(255,255,255,.10)}
.city-card-body{padding:20px}
.city-card h2,.city-card h3{margin:0 0 10px;color:#fff;text-transform:uppercase;letter-spacing:.05em}
.city-card p{color:#c9c2b8;line-height:1.65}
.city-card .site-button{margin-top:5px}
.city-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:24px;align-items:start}
.city-main{display:grid;gap:20px}
.city-side{position:sticky;top:24px;display:grid;gap:16px}
.city-panel{padding:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#161616,#101010);box-shadow:0 14px 30px rgba(0,0,0,.24)}
.city-panel h2{margin:0 0 12px;color:#fff;font-size:1.28rem;letter-spacing:.045em;text-transform:uppercase}
.city-panel h3{margin:18px 0 8px;color:#f0e8dd;font-size:1.02rem;letter-spacing:.035em;text-transform:uppercase}
.city-panel p{color:#cec7bd;line-height:1.72}
.city-panel ul{margin:12px 0 0 20px;padding:0;color:#d4cdc3;line-height:1.7}
.city-panel li{margin-bottom:8px}
.city-callout{padding:16px 18px;border-left:3px solid var(--tp-rust);background:rgba(215,122,45,.09);color:#f2ede4;line-height:1.65}
.city-source-note{padding:14px 16px;border:1px dashed rgba(240,154,73,.45);background:rgba(240,154,73,.06);color:#d9d0c4;font-size:.91rem;line-height:1.65}
.city-source-note a{color:#f0a25a}
.city-link-list{display:grid;gap:10px;margin-top:14px}
.city-link-card{display:block;padding:14px 15px;border:1px solid rgba(255,255,255,.10);background:#0d0d0d;color:#dcd5cc;text-decoration:none}
.city-link-card:hover{border-color:rgba(215,122,45,.65);background:rgba(215,122,45,.09);color:#fff}
.city-link-card strong{display:block;margin-bottom:3px;color:#fff}
.city-link-card span{display:block;color:#aaa39a;font-size:.88rem;line-height:1.45}
.city-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.city-mini{padding:16px;border:1px solid rgba(255,255,255,.09);background:#0d0d0d}
.city-mini strong{display:block;margin-bottom:6px;color:#fff}
.city-mini p{margin:0;color:#beb7ae;font-size:.93rem;line-height:1.55}
.city-timeline{display:grid;gap:12px;margin-top:12px}
.city-timeline article{padding:16px 18px;border-left:3px solid rgba(215,122,45,.72);background:#0d0d0d}
.city-timeline h3{margin:0 0 6px;color:#fff}
.city-timeline p{margin:0}
.city-warning{border-color:rgba(172,55,42,.45);background:rgba(120,25,18,.12)}
.city-law-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.city-law-grid article{padding:16px;border:1px solid rgba(255,255,255,.09);background:#0d0d0d}
.city-law-grid h3{margin:0 0 7px;color:#fff}
.city-law-grid p{margin:0}
.city-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.city-pill{display:inline-flex;padding:7px 10px;border:1px solid rgba(215,122,45,.42);background:rgba(215,122,45,.08);color:#e8ded3;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:980px){.city-card-grid{grid-template-columns:1fr}.city-layout{grid-template-columns:1fr}.city-side{position:static}.city-law-grid,.city-mini-grid{grid-template-columns:1fr}}
@media (max-width:620px){.city-section-nav a{flex:1 1 42%}.city-panel{padding:18px}}


/* Rules and official destination helpers */
.city-action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.city-rule-index{display:grid;gap:8px}
.city-rule-index a{display:block;padding:10px 12px;border:1px solid rgba(255,255,255,.09);background:#0d0d0d;color:#d8d1c8;text-decoration:none;font-weight:800}
.city-rule-index a:hover{border-color:rgba(215,122,45,.65);background:rgba(215,122,45,.09);color:#fff}
.city-panel[id]{scroll-margin-top:24px}
.city-detail-list{display:grid;gap:12px;margin-top:12px}
.city-detail-list article{padding:15px 16px;border:1px solid rgba(255,255,255,.09);background:#0d0d0d}
.city-detail-list h3{margin:0 0 7px;color:#fff}
.city-detail-list p{margin:0}
.city-quote-rule{margin:14px 0 0;padding:15px 17px;border-left:3px solid rgba(215,122,45,.8);background:#0d0d0d;color:#eee7de;font-weight:800;line-height:1.6}
.city-ticket-note{margin-top:14px;padding:13px 15px;border:1px dashed rgba(240,154,73,.45);background:rgba(240,154,73,.06);color:#d9d0c4;font-size:.91rem;line-height:1.6}
.city-ticket-note a{color:#f0a25a}