/* RAVA — studio artwork catalogues (UI/UX v2, Phase 5).
 * System collections read like a gallery catalogue: a cover with a large
 * catalogue numeral, numbered plates (matted prints with wall labels and a
 * curator's note), an index of works. Mobile first; RTL; reduced-motion safe.
 * Breakpoints stay on the max-width scale (RR-4 M-13). */

.ux2-catalogue,
.ux2-shelf {
  --cat-paper: #f3efe6;
  --cat-mat: #fbf9f4;
  --cat-ink: #1b1d1a;
  --cat-muted: #5d635f;
  --cat-rule: color-mix(in srgb, var(--cat-ink) 14%, transparent);
  --cat-accent: #214c3c;
  --cat-accent-soft: color-mix(in srgb, var(--cat-accent) 10%, var(--cat-paper));
  --cat-display: "Estedad", var(--rava-font-display, Vazirmatn), sans-serif;
  --cat-ease: var(--ux-ease, cubic-bezier(.32, .72, 0, 1));
}
.ux2-catalogue--ember  { --cat-accent: #9a3b26; }
.ux2-catalogue--gold   { --cat-accent: #85672a; }
.ux2-catalogue--forest { --cat-accent: #214c3c; }
.ux2-catalogue--indigo { --cat-accent: #33406f; }
.ux2-catalogue--sage   { --cat-accent: #4f6247; }

.ux2-catalogue {
  position: relative;
  background: var(--cat-paper);
  color: var(--cat-ink);
  padding-bottom: calc(48px + var(--rava-mobile-nav-height, 0px));
  overflow-x: clip;
}
.ux2-catalogue * { letter-spacing: 0; }
.ux2-catalogue a { color: inherit; }
.ux2-catalogue a:focus-visible { outline: 2px solid var(--cat-accent); outline-offset: 4px; border-radius: 4px; }

/* ---------- Cover ---------- */
.ux2-catalogue__cover {
  position: relative;
  display: grid;
  gap: 28px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 36px;
  border-bottom: 1px solid var(--cat-rule);
}
.ux2-catalogue__cover-copy { position: relative; z-index: 1; }
.ux2-catalogue__series {
  margin: 0 0 18px;
  color: var(--cat-accent);
  font-size: .75rem;
  font-weight: 700;
}
.ux2-catalogue__series span { font-family: var(--rava-font-mono, ui-monospace, monospace); letter-spacing: .08em; }
.ux2-catalogue__numeral {
  position: absolute;
  inset-block-start: -12px;
  inset-inline-end: -6px;
  z-index: -1;
  color: transparent;
  font: 800 clamp(7rem, 38vw, 16rem)/.8 var(--cat-display);
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--cat-accent) 38%, transparent);
  pointer-events: none;
  user-select: none;
}
.ux2-catalogue__title {
  max-width: 14ch;
  margin: 0;
  font: 800 clamp(2.25rem, 1.6rem + 3.6vw, 4.5rem)/1.15 var(--cat-display);
}
.ux2-catalogue__title-en {
  margin: 10px 0 0;
  text-align: right; /* dir=ltr would otherwise push it to the far side of an RTL cover */
  color: var(--cat-muted);
  font: italic 400 1rem/1.4 Georgia, "Times New Roman", serif;
}
.ux2-catalogue__statement {
  max-width: 34ch;
  margin: 18px 0 0;
  font-size: 1.0625rem;
  line-height: 1.9;
}
.ux2-catalogue__colophon {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  max-width: 480px;
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--cat-rule);
  font-size: .8125rem;
}
.ux2-catalogue__colophon > div { display: contents; }
.ux2-catalogue__colophon dt { color: var(--cat-muted); }
.ux2-catalogue__colophon dd { margin: 0; font-weight: 600; }

/* Three prints fanned like proofs on a studio table. */
.ux2-catalogue__prints {
  position: relative;
  height: 220px;
}
.ux2-catalogue__print {
  position: absolute;
  inset-block-start: 10px;
  width: 132px;
  aspect-ratio: 4 / 5;
  padding: 8px 8px 22px;
  background: var(--cat-mat);
  box-shadow: 0 1px 0 var(--cat-rule), 0 18px 40px rgb(27 29 26 / 16%);
  animation: cat-print var(--ux-slow, 380ms) var(--cat-ease) both;
}
.ux2-catalogue__print img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Decorative: physical positions keep the fan identical in either direction. */
.ux2-catalogue__print--1 { left: 4%; transform: rotate(-6deg); animation-delay: 60ms; }
.ux2-catalogue__print--2 { left: 33%; top: 26px; transform: rotate(2deg); z-index: 1; animation-delay: 120ms; }
.ux2-catalogue__print--3 { left: 62%; top: 2px; transform: rotate(7deg); animation-delay: 180ms; }
@keyframes cat-print { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Plates ---------- */
.ux2-catalogue__plates {
  display: grid;
  gap: 56px;
  width: min(1180px, calc(100% - 32px));
  margin: 40px auto 0;
}
.ux2-plate {
  display: grid;
  gap: 18px;
  align-items: end;
}
.ux2-plate__frame { display: block; text-decoration: none; }
.ux2-plate__mat {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  padding: clamp(14px, 4vw, 28px);
  background: var(--cat-mat);
  box-shadow: 0 1px 0 var(--cat-rule), 0 24px 60px rgb(27 29 26 / 12%), 0 3px 10px rgb(27 29 26 / 6%);
  transition: transform var(--ux-slow, 380ms) var(--cat-ease), box-shadow var(--ux-slow, 380ms) var(--cat-ease);
}
.ux2-plate__mat::after {
  content: "";
  position: absolute;
  inset: clamp(14px, 4vw, 28px);
  box-shadow: inset 0 0 0 1px rgb(27 29 26 / 8%);
  pointer-events: none;
}
.ux2-plate__mat > img,
.ux2-plate__mat > .p21-archive-plate,
.ux2-plate__mat > * { display: block; width: 100%; height: 100%; object-fit: cover; }
.ux2-plate__frame:hover .ux2-plate__mat { transform: translateY(-4px); box-shadow: 0 1px 0 var(--cat-rule), 0 32px 70px rgb(27 29 26 / 16%), 0 4px 12px rgb(27 29 26 / 8%); }

.ux2-plate__triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; aspect-ratio: 3 / 2; }
.ux2-plate__triptych > span { display: block; min-width: 0; overflow: hidden; }
.ux2-plate__triptych img { width: 100%; height: 100%; object-fit: cover; }

.ux2-plate__label {
  display: grid;
  gap: 6px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--cat-accent);
}
.ux2-plate__number {
  margin: 0;
  color: var(--cat-accent);
  font-size: .8125rem;
  font-weight: 600;
}
.ux2-plate__number b { font: 800 1rem/1 var(--cat-display); }
.ux2-plate__title {
  margin: 0;
  font: 800 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.3 var(--cat-display);
}
.ux2-plate__title a { text-decoration: none; }
.ux2-plate__title a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.ux2-plate__artist { margin: 0; color: var(--cat-muted); font-size: .9375rem; }
.ux2-plate__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 8px 0 0;
  font-size: .8125rem;
}
.ux2-plate__facts > div { display: contents; }
.ux2-plate__facts dt { color: var(--cat-muted); }
.ux2-plate__facts dd { margin: 0; }
.ux2-plate__note {
  margin: 10px 0 0;
  color: var(--cat-accent);
  font-size: .875rem;
  font-weight: 700;
}

/* Reveal as plates arrive (theme ux2.js adds .is-seen). */
.ux2-catalogue.is-enhanced [data-ux2-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--cat-ease), transform 700ms var(--cat-ease);
}
.ux2-catalogue.is-enhanced [data-ux2-reveal].is-seen { opacity: 1; transform: none; }

/* ---------- Empty ---------- */
.ux2-catalogue__empty { display: grid; justify-items: center; gap: 16px; padding: 24px 0; text-align: center; }
.ux2-catalogue__empty .ux2-plate__mat { width: min(260px, 70vw); }
.ux2-catalogue__empty p { max-width: 32ch; margin: 0; color: var(--cat-muted); }
.ux2-catalogue__empty a { color: var(--cat-accent); font-weight: 700; }

/* ---------- Index of works ---------- */
.ux2-catalogue__index {
  width: min(1180px, calc(100% - 32px));
  margin: 72px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--cat-ink);
}
.ux2-catalogue__index h2 { margin: 0 0 12px; font: 800 1.25rem/1.4 var(--cat-display); }
.ux2-catalogue__index ol { margin: 0; padding: 0; list-style: none; columns: 1; }
.ux2-catalogue__index li { break-inside: avoid; border-bottom: 1px solid var(--cat-rule); }
.ux2-catalogue__index a {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  text-decoration: none;
}
.ux2-catalogue__index-no { color: var(--cat-accent); font: 800 .9375rem/1 var(--cat-display); }
.ux2-catalogue__index-name { font-weight: 600; }
.ux2-catalogue__index small { color: var(--cat-muted); font-size: .8125rem; }

/* ---------- Next catalogue ---------- */
.ux2-catalogue__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1180px, calc(100% - 32px));
  margin: 56px auto 0;
}
.ux2-catalogue__next > a:first-child { display: inline-flex; align-items: center; min-height: 44px; color: var(--cat-muted); font-weight: 600; }
.ux2-catalogue__next-link {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid var(--cat-accent);
  border-radius: 999px;
  color: var(--cat-accent) !important;
  text-decoration: none;
}
.ux2-catalogue__next-link span { font-size: .75rem; }
.ux2-catalogue__next-link strong { font: 800 1rem/1.3 var(--cat-display); }

/* ---------- Shelf of catalogue covers (home and /collections/) ---------- */
.ux2-shelf { padding: 8px 0; }
.ux2-shelf * { letter-spacing: 0; }
.ux2-shelf__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72vw, 260px);
  gap: 14px;
  overflow-x: auto;
  padding: 4px 16px 18px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  margin: 0;
  list-style: none;
  scrollbar-width: none;
}
.ux2-shelf__rail > li { display: grid; min-width: 0; }
.ux2-shelf__rail::-webkit-scrollbar { display: none; }
.ux2-cover {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 340px;
  padding: 18px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--cat-paper);
  box-shadow: inset -6px 0 0 color-mix(in srgb, var(--cat-accent) 70%, #000), 0 16px 34px rgb(27 29 26 / 14%);
  color: var(--cat-ink);
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform var(--ux-slow, 380ms) var(--cat-ease), box-shadow var(--ux-slow, 380ms) var(--cat-ease);
}
.ux2-cover:hover { transform: translateY(-4px) rotate(-.4deg); }
.ux2-cover:focus-visible { outline: 2px solid var(--cat-accent); outline-offset: 3px; }
.ux2-cover__no { color: var(--cat-accent); font: 800 3.5rem/.9 var(--cat-display); letter-spacing: -.04em !important; }
.ux2-cover__collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-self: end; }
.ux2-cover__collage span { aspect-ratio: 1; overflow: hidden; background: var(--cat-mat); box-shadow: 0 6px 14px rgb(27 29 26 / 12%); }
.ux2-cover__collage img { width: 100%; height: 100%; object-fit: cover; }
.ux2-cover__collage--roastery span { border-radius: 50%; }
.ux2-cover__title { margin: 0; font: 800 1.25rem/1.35 var(--cat-display); }
.ux2-cover__meta { display: block; margin-top: 4px; color: var(--cat-muted); font-size: .8125rem; }
.ux2-cover--all { place-content: center; justify-items: start; background: var(--cat-ink); color: var(--cat-paper); box-shadow: 0 16px 34px rgb(27 29 26 / 14%); }
.ux2-cover--all .ux2-cover__title { color: var(--cat-paper); }

/* ---------- /collections/ ---------- */
.ux2-collections { background: #f3efe6; padding-bottom: calc(40px + var(--rava-mobile-nav-height, 0px)); }
.ux2-collections__head { padding: 28px 16px 8px; }
.ux2-collections__head h1 { margin: 0; font: 800 clamp(2rem, 1.6rem + 2vw, 3rem)/1.2 "Estedad", var(--rava-font-display, Vazirmatn), sans-serif; }
.ux2-collections__subhead { margin: 32px auto 12px; font: 800 1.25rem/1.4 "Estedad", var(--rava-font-display, Vazirmatn), sans-serif; }

/* ---------- Wider screens ---------- */
@media not all and (max-width: 767px) {
  .ux2-catalogue__cover { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; padding: 72px 0 56px; }
  .ux2-catalogue__prints { height: 320px; }
  .ux2-catalogue__print { width: 180px; }
  .ux2-catalogue__plates { gap: 96px; margin-top: 72px; }
  .ux2-plate { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
  .ux2-plate:nth-child(even) .ux2-plate__frame { order: 2; }
  .ux2-plate__frame { max-width: 520px; }
  .ux2-plate:nth-child(even) .ux2-plate__frame { justify-self: end; }
  .ux2-plate__label { max-width: 420px; padding-bottom: 24px; }
  .ux2-catalogue__index ol { columns: 2; column-gap: 40px; }
  .ux2-shelf__rail { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); overflow: visible; padding: 4px 0 18px; }
  .ux2-shelf { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
  .ux2-collections__head { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ux2-catalogue__print { animation: none; }
  .ux2-catalogue.is-enhanced [data-ux2-reveal] { opacity: 1; transform: none; transition: none; }
  .ux2-plate__mat, .ux2-cover { transition: none; }
}

/* ---------- «خانه روا» rows (UI/UX v2 Phase 5) ---------- */
.ux2-home-row { padding-block: 28px 8px; }
.ux2-home-row__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ux2-home-row__head h2 { margin: 2px 0 0; font: 800 clamp(1.25rem, 1.1rem + .8vw, 1.75rem)/1.35 "Estedad", var(--rava-font-display, Vazirmatn), sans-serif; }
.ux2-home-row__head > a,
.ux2-home-row__head .p21-section__archive-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--rava-color-accent, #214c3c); font-weight: 700; text-decoration: none; }
/* Phones: one legible card at a time on a snap rail; the next card peeks in. */
.ux2-home-row__grid.p2-coffee-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: min(74vw, 300px);
  gap: 12px;
  margin-inline: -16px;
  padding: 2px 16px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.ux2-home-row__grid.p2-coffee-grid::-webkit-scrollbar { display: none; }
.ux2-home-row__grid.p2-coffee-grid > * { scroll-snap-align: start; min-width: 0; }
.ux2-home-row--catalogues { background: #f3efe6; padding-bottom: 28px; margin-top: 24px; }
@media not all and (max-width: 767px) {
  .ux2-home-row { padding-block: 48px 8px; }
  .ux2-home-row__grid.p2-coffee-grid { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: 16px; margin-inline: 0; padding: 0; overflow: visible; }
}