:root {
      --main-bg: #eedfc5;
      --card-bg: #f2e1c2;
      --header-bg: #decdaf;
      --footer-bg: #e9dbbe;
      --primary: #604620;
      --secondary: #c4ad88;
      --success: #30a55a;
      --danger: #cd524f;
      --font1: 'Merriweather', serif;
      --font2: 'Montserrat', sans-serif;
    }
    body {
      margin:0;
      font-family:var(--font2);
      background:var(--main-bg);
      color:var(--primary);
    }
    .header {
      background:var(--header-bg);
      padding:16px 0;
      box-shadow:0 2px 6px rgba(0,0,0,0.03);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .navbar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      max-width:1240px;
      margin:auto;
      padding: 0 20px;
    }
    .logo {
      font-weight:700; 
      font-size:29px;
      display: flex;
      align-items: center;
    }
    .logo span {
      margin-right: 8px;
    }
    .nav-links {
      display: flex;
      gap: 20px;
    }
    .navbar a {
      color:var(--primary);
      text-decoration:none;
      transition:.2s;
      font-weight:500;
      display:inline-block;
      padding: 8px 12px;
      border-radius: 6px;
    }
    .navbar a:hover,
    .navbar .active {
      color:#b1771d;
      background: rgba(96, 70, 32, 0.08);
      transform:scale(1.05);
    }
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .search-box {
      padding:10px 18px; 
      border-radius:20px; 
      border:1px solid #d2ae6e;
      background: rgba(255, 255, 255, 0.5);
      min-width: 220px;
      font-size: 15px;
    }
    .icon-btn {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: var(--primary);
      padding: 8px;
      border-radius: 50%;
      transition: all 0.2s;
    }
    .icon-btn:hover {
      background: rgba(96, 70, 32, 0.1);
      transform: scale(1.1);
    }
    .join-btn {
      background: var(--primary);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 20px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    .join-btn:hover {
      background: #7a5b2a;
      transform: translateY(-2px);
    }
    .user-profile {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      padding: 6px 12px;
      border-radius: 20px;
      transition: all 0.2s;
    }
    .user-profile:hover {
      background: rgba(96, 70, 32, 0.08);
    }
    .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #c4ad88;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    .main-title-section {
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      max-width:1240px;
      margin:40px auto 36px auto;
      background: var(--card-bg);
      padding:32px 28px;
      border-radius:16px;
      box-shadow:0 6px 24px rgba(120,90,50,0.05);
      animation:titleFadeIn 1.4s ease;
    }
    @keyframes titleFadeIn {
      from { opacity:0; transform:translateY(-25px);}
      to { opacity:1; transform:translateY(0);}
    }
    .main-title-section .text {
      flex:1 1 390px;
      margin-right:30px;
    }
    .main-title-section h1 {
      font-size:56px;
      font-family:var(--font1);
      font-weight:800;
      letter-spacing:-.03em;
      margin-bottom:18px;
      line-height:1.08;
      animation:txtUp 1.4s cubic-bezier(.8,0,.3,1.1);
    }
    @keyframes txtUp {
      from{opacity:0;transform:translateY(40px);}
      to{opacity:1;transform:translateY(0);}
    }
    .main-title-section p {
      font-size:21px;
      font-weight:400;
      margin-bottom:32px;
    }
    .main-title-section .stats {
      display:flex;
      flex-wrap:wrap;
      font-size:23px;
      font-weight:bold;
      margin-top:18px;
    }
    .main-title-section .stats .item {
      margin-right:38px;
      text-align:left;
    }
    .main-title-section .image {
      flex: 1 1 350px;
      text-align:right;
    }
    .main-title-section .image img {
      max-width:380px;
      border-radius:14px;
      box-shadow:0 12px 32px rgba(120, 90, 50, 0.13);
      animation:imgZoom 1.1s cubic-bezier(.4,0,.4,1.5);
    }
    @keyframes imgZoom {
      from { opacity:0; transform:scale(.94);}
      to { opacity:1; transform:scale(1);}
    }
    .impact-section {
      max-width:1240px;
      margin:36px auto;
      background:var(--card-bg);
      padding:30px 28px;
      border-radius:16px;
      display:block;
      animation:impactFade 1.4s;
    }
    @keyframes impactFade {
      from{opacity:0;}
      to{opacity:1;}
    }
    .impact-title {
      font-size:34px;
      font-family:var(--font1);
      font-weight:700;
      margin-bottom:16px;
      text-align:center;
    }
    .impact-desc {
      font-size:19px;
      margin-bottom:34px;
      text-align:center;
      font-weight:500;
    }
    .impact-icons {
      display:flex;
      justify-content:center;
      gap:60px;
      margin-top:16px;
      flex-wrap:wrap;
    }
    .impact-icons .icon-block {
      text-align:center;
      font-size:18px;
      min-width:180px;
      background:#f7ebdd;
      padding:18px 15px 12px 15px;
      border-radius:13px;
      margin-bottom:18px;
      box-shadow:0 2px 9px 0 rgba(120,90,50,0.03);
      animation:iconFade 1.6s;
    }
    .impact-icons .icon-block i {
      font-size:29px;
      margin-bottom:9px;
      display:inline-block;
      color:var(--primary);
    }
    .impact-icons .icon-block strong {
      display:block;
      font-size:20px;
      margin-bottom:8px;
      font-family:var(--font1);
      font-weight:600;
    }
    @keyframes iconFade {
      from{opacity:0;transform:scale(.7);}
      to{opacity:1;transform:scale(1);}
    }

    .action-buttons {
      text-align:center;
      margin:56px 0 30px 0;
    }
    .action-buttons button,.action-buttons a {
      font-size:19px;
      background:var(--primary);
      color:#fff;
      padding:11px 34px;
      border:none;
      border-radius:7px;
      font-weight:600;
      margin-right:14px;
      cursor:pointer;
      box-shadow:0 2px 12px 0 rgba(120,90,50,0.10);
      transition:.2s, box-shadow .5s cubic-bezier(.9,0,.21,1);
      outline:none;
      animation:btPop .9s cubic-bezier(.3,0,1,1.3);
      display: inline-block;
      text-decoration: none;
    }
    .action-buttons button:hover, .action-buttons a:hover {
      background:var(--secondary);
      color:var(--primary);
      transform:translateY(-2px) scale(1.07);
      box-shadow:0 5px 32px 0 rgba(120,90,50,0.21);
    }
    .action-buttons a {
      background:#f7f1e5;
      color:var(--primary);
      border:2px solid var(--secondary);
      margin-right:0;
    }
    @keyframes btPop {
      from {opacity:0;transform:scale(.8);}
      to {opacity:1;transform:scale(1);}
    }
    .gallery {
      max-width:1240px;
      margin:auto;
      display:flex;
      flex-wrap:wrap;
      gap:26px;
      justify-content:center;
      margin-bottom:58px;
      margin-top:12px;
    }
    .art-card {
      background:var(--card-bg);
      width:378px;
      border-radius:16px;
      box-shadow:0 6px 16px rgba(120,90,50,0.08);
      margin-bottom:20px;
      overflow:hidden;
      transition:.15s box-shadow,.15s transform;
      animation:fadeInCard 1.3s;
      display:flex;
      flex-direction:column;
      position: relative;
    }
    @keyframes fadeInCard {
      from { opacity:0; transform:translateY(28px);}
      to { opacity:1; transform:translateY(0);}
    }
    .art-card:hover {
      box-shadow:0 12px 34px rgba(120,90,50,0.18);
      transform:scale(1.02) translateY(-6px);
    }
    .art-card .top {
      position:relative;
      width:100%;
      height:190px;
      overflow:hidden;
      background:#ebdbc0;
    }
    .art-card .top img {
      width:100%;
      height:100%;
      object-fit:cover;
      transition:.2s;
    }
    .art-card .top .badge {
      position:absolute;
      top:12px;
      left:12px;
      background:var(--primary);
      color:white;
      font-size:17px;
      font-weight:600;
      padding:7px 13px 6px 13px;
      border-radius:8px;
      z-index:5;
      display:inline-block;
      box-shadow:0 1px 4px rgba(120,90,50,0.07);
      letter-spacing:0.03em;
    }
    .art-card .top .price {
      position:absolute;
      top:12px;
      right:12px;
      background:var(--secondary);
      color:var(--primary);
      font-size:18px;
      font-weight:700;
      padding:7px 15px 6px 15px;
      border-radius:8px;
      z-index:6;
    }
    .art-card .top .actions {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      display:flex;
      gap:9px;
      z-index:10;
      opacity:0;
      transition:.2s;
    }
    .art-card:hover .top .actions {
      opacity:1;
    }
    .art-card .top .actions button {
      background:white;
      color:var(--primary);
      border:none;
      border-radius:8px;
      font-size:21px;
      padding:11px;
      cursor:pointer;
      box-shadow:0 2px 9px rgba(120,90,50,0.14);
      transition:.16s;
    }
    .art-card .top .actions button:hover {
      background:var(--secondary);
      color:#fff;
      transform:scale(1.12);
    }
    .art-card .bottom {
      padding:22px 18px 18px 18px;
      font-family:var(--font1);
      font-size:18px;
      flex:1;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .art-card .title {
      font-weight:700;
      font-size:23px;
      margin-bottom:7px;
      letter-spacing:-.015em;
    }
    .art-card .desc {
      font-size:16px;
      color:#71582b;
      margin-bottom:12px;
      font-family:var(--font2);
      font-weight:470;
      line-height:1.32;
    }
    .art-card .labels {
      margin-bottom:7px;
      margin-top:5px;
    }
    .art-card .labels label {
      background:var(--secondary);
      color:#fff;
      font-size:15px;
      border-radius:6px;
      padding:2px 9px 3px 9px;
      margin-right:7px;
      margin-bottom:2px;
      font-weight:500;
      display:inline-block;
    }
    .art-card .sizes {
      font-size:15px;
      color:#876c45;
      margin-bottom:6px;
      font-weight:500;
    }
    .art-card .status-sold {
      color:var(--danger);
      font-weight:700;
    }
    .art-card .status-avail {
      color:var(--success);
      font-weight:700;
    }
    .footer {
      background:var(--footer-bg);
      padding:38px 0;
      font-size:16px;
      color:#71582b;
      font-family:var(--font2);
      box-shadow:0 -2px 12px rgba(120,90,50,0.04);
      margin-top:46px;
    }
    .footer .content {
      max-width:1240px;
      margin:auto;
      display:flex;
      flex-wrap:wrap;
      gap:38px;
      justify-content:space-between;
      padding: 0 20px;
    }
    .footer .block {
      flex:1 1 210px;
      margin-bottom:23px;
    }
    .footer h3 {
      font-family:var(--font1);
      font-weight:700;
      font-size:19px;
      margin-bottom:10px;
      color:var(--primary);
    }
    .footer a {
      color:var(--primary);
      text-decoration:none;
      transition:.14s;
      font-weight:500;
      display: inline-block;
      margin-bottom: 8px;
    }
    .footer a:hover { color:var(--danger);}