/* Carousel code - Claude */
  :root {
    --btn-bg: rgba(0, 0, 0, 0.45);
    --btn-bg-hover: rgba(0, 0, 0, 0.65);
    --focus-ring: #ffd54a;
  }

  * { box-sizing: border-box; }

  body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }

  /* Containing content block - carousel scales to 100% of this */
  .carousel-block {
    max-width: 500px;
    margin: 0 auto 0 0;
  }

  .carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    background: #ddd;
  }

  /* Square aspect ratio to match 900x900 source images */
  .carousel-track {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
  }

  .carousel-slide.is-active {
    opacity: 1;
    visibility: visible;
  }

  .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Overlaid nav buttons, centered vertically, left/right */
  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--btn-bg);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.2s ease;
    padding: 0;
  }

  .carousel-btn:hover {
    background: var(--btn-bg-hover);
  }

  .carousel-btn--prev { left: 12px; }
  .carousel-btn--next { right: 12px; }

  /* Visible keyboard focus state */
  .carousel-btn:focus {
    outline: none;
  }
  .carousel-btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    background: var(--btn-bg-hover);
  }

  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }

  .carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #bbb;
    cursor: pointer;
    padding: 0;
  }

  .carousel-dot.is-active {
    background: #555;
  }

  .carousel-dot:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  @media (max-width: 480px) {
    .carousel-btn {
      width: 36px;
      height: 36px;
      font-size: 1.1rem;
    }
  }