.font-cinzel { font-family: Cinzel,serif; }
.principle-layout { max-width: 1160px; margin: auto; padding: 48px 24px 80px; }
.principle-return { color: #d4af37; display: inline-block; margin-bottom: 32px; }
.principle-columns { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 64px; }
.principle-eyebrow { color: #d4af37; font-size: 11px; letter-spacing: .16em; margin-bottom: 12px; }
#principle-title { font-size: clamp(30px,5vw,52px); font-weight: 700; margin-bottom: 32px; overflow-wrap: anywhere; }
#principle-content { color: #cbd5e1; font-size: 17px; line-height: 1.85; overflow-wrap: anywhere; }
#principle-content p { margin: 0 0 18px; white-space: pre-line; }
#principle-content h2 { margin: 32px 0 16px; font-size: 22px; color: #d4af37; font-weight: 600; }
.principle-navigation { align-self: start; border: 1px solid #d4af3733; padding: 24px; border-radius: 20px; }
.principle-navigation h2 { font-weight: 600; margin-bottom: 16px; }
.principle-navigation a { display: block; padding: 10px 0; color: #94a3b8; }
.principle-navigation a[aria-current],.principle-navigation a:hover { color: #d4af37; }
.light #principle-content { color: #334155; }
.light .principle-return,.light #principle-content h2,.light .principle-eyebrow { color: #856610; }
@media(max-width:767px) { .principle-columns { grid-template-columns: 1fr; gap: 32px; } .principle-layout { padding: 32px 20px 48px; } }