/* Tropicalia 3.5 — responsive horizontal catalogues and artist photography. */
.horizontal-rail, .home-page .catalog-cards.horizontal-rail {
  --rail-gap: clamp(22px, 2.6vw, 42px);
  display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--rail-gap);
  width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden;
  padding: 18px 2px 28px; scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--sand) rgba(11,31,26,.09);
}
.horizontal-rail > [data-rail-item] { flex: 0 0 calc((100% - 2 * var(--rail-gap)) / 3.15); min-width: 0; scroll-snap-align: start; }
.horizontal-rail.is-draggable { cursor: grab; }
.horizontal-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.horizontal-rail.is-dragging a { cursor: grabbing; }
.horizontal-rail img { -webkit-user-drag: none; user-select: none; }
.horizontal-rail:focus-visible { outline: 2px solid var(--rust); outline-offset: 7px; }
.home-page .release-rail .release-art-stage { width: 81%; margin-right: 19%; }
.home-page .release-rail .catalog-card__info { border-top: 0; padding-top: 22px; }
.home-page .release-rail .catalog-card__info h3 { font-size: clamp(2rem, 2.8vw, 3.1rem); }
.home-page .release-rail .catalog-card__top { padding-right: 12px; gap: 12px; }
.release-rail .release-art-stage__play { opacity: 1; transform: none; }
.rail-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; margin-top: 22px; }
.rail-footer > p { display: flex; align-items: center; gap: 15px; margin: 0; color: var(--muted); font: 500 .74rem/1.6 var(--sans); }
.rail-footer > p > span { color: var(--rust); font-size: 1.35rem; }
.rail-controls { display: flex; align-items: center; gap: 8px; }
.rail-controls button { width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; font: 400 1.2rem/1 var(--sans); color: var(--forest); transition: background .25s, color .25s, opacity .25s; }
.rail-controls button:hover:enabled { background: var(--forest); color: var(--ivory); }
.rail-controls button:disabled { opacity: .28; cursor: default; }
.rail-position { margin-right: 16px; color: var(--earth); font: 500 .7rem/1.4 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.home-page .family-section { background: var(--forest); color: var(--ivory); }
.family-section .section-index { color: var(--sand); }
.home-page .family-section .editorial-heading h2 { color: var(--ivory); }
.family-section .editorial-link { color: var(--ivory); border-color: var(--line-light); }
.family-rail > [data-rail-item] { flex-basis: calc((100% - 3 * var(--rail-gap)) / 3.4); }
.family-section .horizontal-rail { scrollbar-color: var(--sand) rgba(244,241,234,.12); }
.family-section .rail-footer > p, .family-section .rail-position { color: rgba(244,241,234,.72); }
.family-section .rail-footer > p > span { color: var(--sand); }
.family-section .rail-controls button { color: var(--ivory); border-color: var(--line-light); }
.family-section .rail-controls button:hover:enabled { background: var(--sand); color: var(--forest); }
.family-card { display: block; color: inherit; min-width: 0; }
.family-card__portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; background: var(--green); transition: transform .45s var(--ease), box-shadow .45s; will-change: auto; }
.family-card__portrait > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform .55s var(--ease); }
[data-image-position="top"] img { object-position: center top; }
[data-image-position="bottom"] img { object-position: center bottom; }
.family-card__portrait::after { content: ""; position: absolute; z-index: 0; inset: 45% 0 0; background: linear-gradient(transparent, rgba(5,5,5,.62)); pointer-events: none; }
.family-card__number { position: absolute; z-index: 1; left: 16px; top: 16px; display: grid; place-items: center; min-width: 32px; min-height: 32px; padding: 5px; border: 1px solid rgba(244,241,234,.35); border-radius: 50%; background: rgba(11,31,26,.55); color: var(--ivory); font: 500 .64rem/1 var(--sans); }
.family-card__open { position: absolute; z-index: 1; inset: auto 18px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ivory); font: 800 .55rem/1.5 var(--label); text-transform: uppercase; letter-spacing: .04em; }
.family-card__open b { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(244,241,234,.5); border-radius: 50%; font: 400 1.2rem/1 var(--sans); transition: background .25s, color .25s, transform .3s; }
.family-card__info { padding: 22px 0 3px; }
.family-card__info h2, .family-card__info h3 { margin: 0; font: 400 clamp(1.9rem, 2.7vw, 3rem)/1.12 var(--serif); letter-spacing: -.025em; overflow-wrap: anywhere; }
.family-card__info p { margin: 9px 0 0; opacity: .65; font: 600 .58rem/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.family-card:focus-visible .family-card__open b { background: var(--sand); color: var(--forest); }
.artist-collection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 65px 36px; }
.artist-page .site-header { background: var(--forest); }
.artist-profile--gallery { align-items: center; padding-bottom: clamp(65px, 7vw, 110px); }
.artist-profile--gallery .artist-profile-image { max-width: 600px; }
.artist-portrait-link { display: block; position: relative; z-index: 1; }
.artist-portrait-link > span { position: absolute; z-index: 2; right: 18px; bottom: 18px; background: var(--forest); color: var(--ivory); padding: 10px 14px; font: 500 .66rem/1.5 var(--sans); }
.artist-profile--gallery .artist-profile-image img { filter: none; }
.artist-back { display: block; width: fit-content; margin-bottom: 38px; color: var(--earth); font: 600 .65rem/1.5 var(--sans); }
.artist-location { display: block; color: var(--rust); font: 800 .62rem/1.6 var(--label); letter-spacing: .06em; text-transform: uppercase; }
.artist-profile-copy .artist-intro { white-space: pre-line; }
.artist-profile-copy h1 { overflow-wrap: anywhere; }
.artist-profile-links { display: flex; flex-wrap: wrap; gap: 18px 25px; margin-top: 32px; }
.artist-profile-links a { padding-bottom: 6px; border-bottom: 1px solid var(--line); font: 600 .7rem/1.5 var(--sans); }
.artist-story { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(35px, 6vw, 90px); border-block: 1px solid var(--line); background: var(--ivory); }
.artist-story h2, .artist-section-heading h2 { margin: 20px 0 0; font: 400 clamp(2.8rem, 4.5vw, 5.2rem)/1.12 var(--serif); letter-spacing: -.025em; }
.artist-story h2 em, .artist-section-heading h2 em { color: var(--rust); font-style: normal; }
.artist-story__text { max-width: 800px; font-size: 1.05rem; line-height: 1.9; color: var(--muted); overflow-wrap: anywhere; }
.artist-story__text p { margin: 0 0 1.4em; }
.artist-story__text p:last-child { margin-bottom: 0; }
.artist-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 45px; }
.artist-section-heading p { max-width: 320px; margin: 0; color: var(--muted); font-size: .9rem; }
.artist-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px 24px; align-items: start; }
.artist-photo { min-width: 0; margin: 0; }
.artist-photo:nth-child(6n+2) { margin-top: 55px; }
.artist-photo > a { display: block; position: relative; overflow: hidden; background: var(--forest); aspect-ratio: 4 / 5; }
.artist-photo:nth-child(3n) > a { aspect-ratio: 1; }
.artist-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.artist-photo a > span { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ivory); color: var(--forest); font-size: 1.3rem; }
.artist-photo figcaption { margin-top: 13px; color: var(--muted); font: 500 .78rem/1.7 var(--sans); overflow-wrap: anywhere; }
.artist-discography { border-top: 1px solid var(--line); }
.photo-viewer { width: min(1200px, calc(100vw - 36px)); max-width: none; height: min(900px, calc(100dvh - 36px)); max-height: none; padding: 0; border: 1px solid var(--line-light); background: var(--forest); color: var(--ivory); overflow: hidden; }
.photo-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.photo-viewer::backdrop { background: rgba(5,5,5,.9); }
.photo-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--line-light); }
.photo-viewer__bar h2 { min-width: 0; margin: 0; font: 500 .78rem/1.5 var(--sans); overflow-wrap: anywhere; }
.photo-viewer button { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border: 1px solid var(--line-light); border-radius: 50%; background: var(--forest); color: var(--ivory); font: 400 1.4rem/1 var(--sans); }
.photo-viewer button:hover { color: var(--forest); background: var(--sand); }
.photo-viewer__stage { display: grid; position: relative; min-height: 0; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; gap: 16px; padding: 16px; touch-action: pan-y pinch-zoom; }
.photo-viewer__stage > img { grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.photo-viewer__footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 66px; padding: 16px 22px; border-top: 1px solid var(--line-light); }
.photo-viewer__footer p { margin: 0; font: 400 .84rem/1.6 var(--sans); overflow-wrap: anywhere; }
.photo-viewer__footer > span { flex-shrink: 0; color: var(--sand); font: 500 .72rem/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.photo-viewer-open { overflow: hidden; }
.photo-load-status { position: absolute; left: 75px; right: 75px; bottom: 24px; margin: 0; padding: 12px; text-align: center; color: var(--ivory); background: var(--forest); font: 500 .78rem/1.6 var(--sans); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .family-card:hover .family-card__portrait { transform: perspective(800px) rotateX(var(--portrait-tilt-x, 0deg)) rotateY(var(--portrait-tilt-y, 0deg)); box-shadow: 0 14px 24px rgba(5,5,5,.13); }
  .family-card:hover .family-card__portrait > img { transform: scale(1.065) translate(var(--portrait-x, 0px), var(--portrait-y, 0px)); }
  .family-card:hover .family-card__open b { transform: rotate(45deg); color: var(--forest); background: var(--sand); }
  .artist-photo a:hover img { transform: scale(1.04); }
}
@media (max-width: 1020px) {
  .horizontal-rail > [data-rail-item] { flex-basis: calc((100% - var(--rail-gap)) / 2.15); }
  .family-rail > [data-rail-item] { flex-basis: calc((100% - 2 * var(--rail-gap)) / 2.5); }
  .artist-collection { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 45px 28px; }
  .artist-profile--gallery { gap: 58px; }
  .artist-profile--gallery .artist-profile-image { width: min(100%,520px); }
  .artist-story { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 760px) {
  .horizontal-rail, .home-page .catalog-cards.horizontal-rail { --rail-gap: 18px; padding-top: 10px; padding-bottom: 20px; }
  .horizontal-rail > [data-rail-item], .family-rail > [data-rail-item] { flex-basis: 84%; }
  .home-page .release-rail .release-art-stage { width: 87%; margin-right: 13%; }
  .home-page .release-rail .catalog-card__info h3 { font-size: clamp(2rem,8vw,2.8rem); }
  .home-page .release-rail .catalog-card__top { min-height: 44px; font-size: .46rem; }
  .rail-footer > p { font-size: .69rem; }
  .rail-position { margin-right: 8px; font-size: .64rem; }
  .family-card__info h2, .family-card__info h3 { font-size: clamp(1.9rem,7.5vw,2.8rem); }
  .artist-collection { padding: 55px 22px; gap: 35px 18px; }
  .artist-collection .family-card__open { inset: auto 10px 10px; font-size: .44rem; }
  .artist-collection .family-card__open b { width: 30px; height: 30px; }
  .artist-collection .family-card__info h2 { font-size: 1.8rem; }
  .artist-story, .artist-photo-section, .artist-discography { padding: 62px 22px; }
  .artist-story h2, .artist-section-heading h2 { font-size: clamp(2.8rem,10vw,4rem); }
  .artist-section-heading { flex-direction: column; align-items: flex-start; gap: 20px; }
  .artist-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 27px 14px; }
  .artist-photo:nth-child(6n+2) { margin-top: 0; }
  .artist-photo:nth-child(2n) { margin-top: 32px; }
  .artist-photo a, .artist-photo:nth-child(3n) > a { aspect-ratio: 4 / 5; }
  .artist-photo figcaption { font-size: .7rem; }
  .artist-back { margin-bottom: 28px; }
  .photo-viewer { width: 100%; height: 100dvh; margin: 0; border: 0; }
  .photo-viewer__bar { padding: max(12px, env(safe-area-inset-top)) 14px 12px; }
  .photo-viewer__stage { display: block; padding: 8px 0 58px; }
  .photo-viewer__stage > img { width: 100%; height: 100%; }
  .photo-viewer__prev, .photo-viewer__next { position: absolute; bottom: 4px; }
  .photo-viewer__prev { left: calc(50% - 54px); }
  .photo-viewer__next { right: calc(50% - 54px); }
  .photo-viewer__footer { padding: 14px 18px max(14px, env(safe-area-inset-bottom)); }
  .photo-load-status { left: 18px; right: 18px; bottom: 62px; }
}
@media (max-width: 420px) {
  .rail-footer { align-items: flex-start; flex-direction: column; }
  .rail-controls { align-self: flex-end; }
  .artist-collection { grid-template-columns: 1fr; }
  .artist-collection .family-card__info h2 { font-size: 2.3rem; }
  .artist-collection .family-card__open { font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .horizontal-rail { scroll-behavior: auto; }
  .family-card__portrait, .family-card__portrait > img { transform: none !important; }
}