:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; background:#f7f5f0; color:#24211d; }
* { box-sizing:border-box; } body { margin:0; min-width:0; background:#f7f5f0; }
.preview-header, .preview-main { width:min(1280px, calc(100% - 48px)); margin-inline:auto; }
.preview-header { padding:54px 0 20px; }
.eyebrow { margin:0 0 14px; color:#315044; font:700 .72rem/1 Georgia,serif; letter-spacing:.2em; }
.preview-header h1 { margin:0; font:600 clamp(2rem,4vw,3.5rem)/1.1 "Yu Mincho",serif; letter-spacing:.03em; }
.preview-header p { max-width:620px; margin:14px 0 0; color:#71695e; line-height:1.8; }
.preview-main { padding:22px 0 76px; }

.horizontal-catalog-shelf {
  --catalog-gap: clamp(14px, 1.8vw, 24px);
  --catalog-control: 42px;
  min-width: 0;
}
.horizontal-catalog-shelf__heading { margin: 0 0 16px; }
.horizontal-catalog-shelf__heading h2 {
  margin: 0;
  color: #24211d;
  font: 600 clamp(1.45rem, 2.4vw, 2.15rem)/1.25 "Yu Mincho", "Hiragino Mincho ProN", serif;
}
.horizontal-catalog-shelf__heading p {
  margin: 7px 0 0;
  color: #756e67;
  font-size: .86rem;
  line-height: 1.6;
}
.horizontal-catalog-shelf__viewport {
  display: grid;
  grid-template-columns: var(--catalog-control) minmax(0, 1fr) var(--catalog-control);
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.horizontal-catalog-shelf__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(160px, calc((100% - (5 * var(--catalog-gap))) / 6), 270px);
  gap: var(--catalog-gap);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(49, 80, 68, .35) transparent;
  -webkit-overflow-scrolling: touch;
}
.horizontal-catalog-shelf__track::-webkit-scrollbar { height: 6px; }
.horizontal-catalog-shelf__track::-webkit-scrollbar-thumb { background: rgba(49, 80, 68, .35); border-radius: 99px; }
.horizontal-catalog-shelf__track:focus-visible { outline: 2px solid #315044; outline-offset: 4px; }
.horizontal-catalog-shelf__arrow {
  display: grid;
  width: var(--catalog-control);
  height: var(--catalog-control);
  place-items: center;
  border: 1px solid rgba(49, 80, 68, .35);
  border-radius: 50%;
  background: #fffdf7;
  color: #315044;
  cursor: pointer;
  font: 400 28px/1 Georgia, serif;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.horizontal-catalog-shelf__arrow:hover:not(:disabled),
.horizontal-catalog-shelf__arrow:focus-visible {
  background: #315044;
  color: #fff;
  outline: 2px solid #315044;
  outline-offset: 3px;
}
.horizontal-catalog-shelf__arrow:disabled { cursor: default; opacity: .25; }
.catalog-card {
  display: block;
  min-width: 0;
  color: #24211d;
  text-decoration: none;
  scroll-snap-align: start;
}
.catalog-card__image-wrap {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 2px;
  background: #e9e5dc;
}
.catalog-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .22s ease;
}
.catalog-card:hover .catalog-card__image,
.catalog-card:focus-visible .catalog-card__image { transform: scale(1.025); }
.catalog-card:focus-visible { outline: 2px solid #315044; outline-offset: 4px; border-radius: 2px; }
.catalog-card__title {
  display: block;
  margin: 9px 0 0;
  color: #24211d;
  text-align: center;
  font-size: clamp(.88rem, 1.2vw, 1.02rem);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.catalog-card__subtitle {
  display: block;
  margin-top: 3px;
  color: #756e67;
  font-size: .76rem;
  line-height: 1.4;
}
@media (max-width: 700px) {
  .horizontal-catalog-shelf { --catalog-control: 32px; }
  .horizontal-catalog-shelf__viewport { gap: 6px; }
  .horizontal-catalog-shelf__track {
    grid-auto-columns: min(76vw, 280px);
    gap: 14px;
    padding-bottom: 8px;
  }
  .horizontal-catalog-shelf__arrow { font-size: 22px; }
  .catalog-card__title { font-size: .94rem; }
}
@media (prefers-reduced-motion: reduce) {
  .horizontal-catalog-shelf__track { scroll-behavior: auto; }
  .catalog-card__image { transition: none; }
}

.preview-note { margin:42px 0 0; color:#756e67; font-size:.82rem; line-height:1.7; }
@media (max-width:700px) { .preview-header, .preview-main { width:calc(100% - 32px); } .preview-header { padding:34px 0 14px; } .preview-main { padding-top:14px; } .preview-header h1 { font-size:2.05rem; } }