:root {
        --primary: #88012c;
        --bg: #241a08;
        --text: #d3cbb6;
        --accent: #cbb089;
    }
    body { font-family: sans-serif; background: #eee; color: #3f312b; margin: 0; padding: 0; }
    #wrapper { max-width: 1000px; margin: 0 auto; background: #fff; padding: 20px; display: grid; grid-template-columns: 200px 1fr 200px; gap: 20px; }
    header, footer { text-align: center; padding: 20px; background: #000; color: #fff; }
    #header-box { grid-column: span 3; text-align: center; }
    .hero-photo { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
    nav ul { list-style: none; padding: 0; display: flex; justify-content: center; gap: 15px; background: #532b12; padding: 10px; }
    nav a { color: #fff; text-decoration: none; }
    .side-menu { border: 1px solid #aaa; padding: 10px; background: #f9f9f9; }
    .content-area { grid-column: 2; }
    .red { color: var(--primary); font-weight: bold; }
    .mb10 { margin-bottom: 10px; }
    hr.dot { border: none; border-top: 1px dotted #606060; margin: 10px 0; }
    #fmenu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 20px; }
    @media (max-width: 768px) {
        #wrapper { grid-template-columns: 1fr; }
        .side-menu, .content-area { grid-column: 1; }
    }