:root{
      --brick:#b84b3a;
      --mortar:#e3d9d6;
      --accent:#2b2b2b;
      --card:#fffaf7;
      --shadow: 0 6px 18px rgba(0,0,0,0.12);
      --radius:14px;
    }

    /* page reset */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      background: linear-gradient(180deg,var(--mortar) 0%, #efebe8 100%);
      color:var(--accent);
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      display:flex; align-items:center; justify-content:center; padding:40px;
    }

    /* brick wall background made of repeating linear-gradients */
    .brick-wall{
      position: absolute; inset:0; z-index:0; pointer-events:none; opacity:0.95;
      background-image:
        linear-gradient(#c35b46 0 0),
        linear-gradient(90deg, rgba(0,0,0,0.06) 0.5px, transparent 0.5px);
      background-size: calc(120px) 60px, 1px 1px;
      background-repeat: repeat, repeat;
      background-position: 0 0, 0 0;
      filter: contrast(0.98) saturate(0.9);
    }

    /* better brick pattern with pseudo bricks */
    .wall-pattern{
      position: absolute; inset:0; z-index:0; opacity:0.25; background-color:transparent;
      background-size: 160px 80px, 160px 80px, 160px 80px;
      background-position: 0 0, 0 0, 0 0;
      mix-blend-mode:multiply;
    }

    .container{
      position:relative; z-index:1; width:100%; max-width:760px; margin:20px; 
      display:grid; grid-template-columns:1fr; gap:20px;
    }

    .card{
      background: wheat;
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:34px;
      border:6px solid rgba(0,0,0,0.04);
      overflow:hidden;
    }

    .calendar .card {
      background: #F0F4F9;
    }

    .hero{  
      display:flex; gap:20px; align-items:center;
    }

    .logo {
      width:84px; height:84px; border-radius:12px; background-color: white;
      display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; color:var(--brick);
      border:4px solid rgba(184,75,58,0.06);
      flex-shrink:0;
      padding: 2px;
    }
      .logo img{ max-width: 100%;}

    h1{
      margin:0; font-family:'Playfair Display', Georgia, serif; font-size:28px; letter-spacing:0.2px;
      color:var(--accent);
    }
    p.lead{margin:6px 0 0; color:#5b5b5b}

    .contact-list{display:flex; flex-direction:column; gap:12px; margin-top:18px}

    .contact-item{
      display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(250,250,248,0.6));
      border:1px solid rgba(0,0,0,0.04);
    }
    .contact-item svg{width:20px; height:20px; flex-shrink:0}
    .contact-item a{color:var(--accent); text-decoration:none; font-weight:600}

    .socials{display:flex; gap:12px; margin-top:18px}
    .social-btn{
      display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none;
      background:transparent; border:2px solid rgba(0,0,0,0.06); min-width:160px; justify-content:center;
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .social-btn:hover{transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,0.08)}

    .facebook{background:linear-gradient(180deg,#fff,#fffaf7); color:#365899}
    .instagram{background:linear-gradient(180deg,#fff,#fffaf7); color:#e1306c}
    .web{background:linear-gradient(180deg,#fff,#fffaf7); color:#30e16c}

    .footer-note{margin-top:18px; font-size:13px; color:#6a6a6a}

    /* small screens */
    @media (max-width:520px) 
    {
      .hero { flex-direction:row; gap:12px }
      .logo { width:64px; height:64px; font-size:18px } 
      .container { max-width: 100%; margin: 10px; }
      .card { padding: 20px; }
      .social-btn { min-width:120px; padding:10px; width: 100%; display: block;}
    }