:root {
    --blue-color: #203351;
    --accent-color: #4E1919;
    --bg-color: #f9f9f9;
    --text-color: #272727;
    --font-body: 'Oswald', serif;
    --font-heading: 'Playfair Display', serif;
    --max-width: 1200px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { max-width: 100%; overflow-x: hidden; }
  body { font-family: var(--font-body); color: var(--text-color); background: var(--bg-color); }
  a { color: var(--blue-color); text-decoration: none; font-weight: 500; }
  a:hover { color: var(--accent-color); }
  .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; }
  
  /* Header */
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #eee;
  }
  .logo img { height: 63px; width: auto; }
  .menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; }
  nav ul { display: flex; gap: 3rem; list-style: none; align-items: flex-start; }
  nav li a { font-size: 1.15rem; font-weight: 600; }
  .btn-contact {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    padding: 0.85rem 2.3rem;
    background: #f5c566;
    color: var(--text-color);
    border: 2px solid #8aa5b0;
    border-radius: 999px;
    transition: background 0.2s;
  }
  .btn-contact:hover { background: #e0b34e; }
  
  /* Banner */
  .banner {
    display: block;
    width: 1596px;
    height: auto;
    margin: 0 0 2rem -2rem;
  }
  
  /* Main detail layout */
  .detail-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2rem;
    margin: 2rem 0;
  }
  .art-detail__image {
    flex: 0 0 auto;
    width: 700px;
    height: 700px;
    background: #fff;
    align-self: flex-start;
  }
  .art-detail__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
  }
  .art-detail__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .art-detail__title { font-family: var(--font-heading); font-size: 2.5rem; color: var(--blue-color); }
.art-detail__year {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
  color: #555;
}


  .art-detail__specs {
    font-family: var(--font-body);
    list-style: none;     /* remove bullets */
    font-weight: 200;
    color: var(--text-color);
  }
  
  .art-detail__specs li {
    font-weight: inherit;
  }
  
  .art-detail__specs li strong {
    font-weight: 700;
  }
  
  .art-detail__specs li strong::after {
    content: "\00a0\00a0\00a0" !important;
  }
  
  .art-detail__description { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6; color: #555; text-align: justify; font-weight: 300; }

  .art-detail__section-title {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--blue-color);
  margin-bottom: 0.5rem;
}
  
  /* Responsive: scale image down to max 500px */
  @media (max-width: 1200px) {
    .art-detail__image {
      width: 500px;
      height: auto;
      align-self: flex-start;
    }
  }
  
  /* Responsive: text under image, image box shrinks with image */
  @media (max-width: 520px) {
    .detail-wrapper { flex-direction: column; }
    .art-detail__image {
      width: 100%;
      height: auto;
      align-self: flex-start;
    }
  }
  
  /* Responsive menu toggle breakpoint */
  @media (max-width: 850px) {
    .menu-toggle { display: block; }
    nav ul { display: none; flex-direction: column; position: absolute; top: 100%; right: 2rem; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.1); padding: 1rem; }
    nav ul.open { display: flex; }
  }