/* ==========================================================================
   E&A THANGKA ARTWORK — Home page sections
   ========================================================================== */

/* --- Placeholder system ---------------------------------------------------
   No photography has been supplied yet. Every .ph block is a stand-in that
   should be swapped for an <img> once artwork arrives — the classes and
   aspect ratios stay exactly as they are.
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(70% 58% at 32% 24%, rgba(212, 168, 87, .1), transparent 62%),
    linear-gradient(135deg, #241a13 0%, #14100D 48%, #080706 100%);
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 87, .07);
}
.ph::before {                                  /* mandala fragment */
  content: '';
  position: absolute;
  inset: -22%;
  background: url('../img/mandala-ring.svg?v=20260909212727') no-repeat;
  background-size: 150%;
  background-position: var(--ph-pos, 30% 40%);
  opacity: .26;
  filter: invert(72%) sepia(38%) saturate(560%) hue-rotate(-6deg);
}
.ph::after {                                   /* what will go here */
  content: attr(data-ph);
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(212, 168, 87, .45);
  background: linear-gradient(0deg, rgba(11, 10, 9, .82), transparent);
}
.ph--landscape { aspect-ratio: 4 / 3; }
.ph--product   { aspect-ratio: 4 / 5; }
.ph--portrait  { aspect-ratio: 3 / 4; }
.ph--wide      { aspect-ratio: 16 / 10; }

/* Vary the fragment so nine cards do not look identical. The .ph is an only
   child inside each card, so the count has to come from the card itself. */
.product-card:nth-child(6n+1) .ph { --ph-pos: 14% 18%; background-size: 165%; }
.product-card:nth-child(6n+2) .ph { --ph-pos: 76% 30%; background-size: 190%; }
.product-card:nth-child(6n+3) .ph { --ph-pos: 42% 82%; background-size: 150%; }
.product-card:nth-child(6n+4) .ph { --ph-pos: 88% 64%; background-size: 205%; }
.product-card:nth-child(6n+5) .ph { --ph-pos: 26% 56%; background-size: 175%; }
.product-card:nth-child(6n)   .ph { --ph-pos: 60% 12%; background-size: 220%; }

.gallery-card:nth-child(3n+1) .ph { --ph-pos: 22% 30%; background-size: 160%; }
.gallery-card:nth-child(3n+2) .ph { --ph-pos: 70% 62%; background-size: 195%; }
.gallery-card:nth-child(3n)   .ph { --ph-pos: 46% 18%; background-size: 175%; }

.news-item:nth-child(3n+1) .ph { --ph-pos: 62% 40%; background-size: 185%; }
.news-item:nth-child(3n+2) .ph { --ph-pos: 18% 70%; background-size: 155%; }
.news-item:nth-child(3n)   .ph { --ph-pos: 84% 24%; background-size: 210%; }

/* ==========================================================================
   Live Updates
   ========================================================================== */
.live {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--c-ink);
}
.live::before {                                /* central gold bloom */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 100% at 50% 50%, rgba(212, 168, 87, .09), transparent 70%);
  pointer-events: none;
}
.live > .container { position: relative; }

.live__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.live__heading {
  font-size: var(--fs-h3);
  margin: 0;
  color: var(--c-gold-lt);
}
.live__meta { margin: 0; font-size: var(--fs-xs); color: var(--c-text-mute); letter-spacing: .1em; }
@media (min-width: 640px) { .live__meta { margin-left: auto; } }

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 12px 5px 9px;
  border: 1px solid rgba(245, 185, 66, .45);
  border-radius: var(--radius-pill);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-amber);
  background: rgba(245, 185, 66, .07);
}
.live-badge__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-amber);
}
.live-badge__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c-amber);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .85; }
  100% { transform: scale(3.2); opacity: 0; }
}

.live-card {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: linear-gradient(160deg, var(--c-ink-3) 0%, #100D0A 100%);
  border: 1px solid var(--c-gold-24);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), 0 0 40px rgba(212, 168, 87, .06);
}
.live-card::before {                           /* gold seam along the top */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold), var(--c-amber), transparent);
}

.live-card__kicker {
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--c-gold);
  margin-bottom: var(--sp-3);
}
.live-card__title {
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  color: var(--c-text);
  margin-bottom: var(--sp-5);
}

.live-card__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
}
.live-fact { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0; }
.live-fact dt {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  filter: saturate(.85);
}
.live-fact dd {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--c-text);
  letter-spacing: .03em;
}
.live-fact dd strong { font-weight: 500; color: var(--c-gold-lt); }

.live-card__aside {
  display: none;
  border-left: 1px solid var(--c-gold-12);
  padding-left: var(--sp-7, 1.75rem);
}

/* No decorative rules here — the column is narrow and they pushed the label
   onto a second line. The border-left already marks it as an aside. */
.live-card__aside-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}
.live-card__aside-body {
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
  margin: 0;
}

@media (min-width: 900px) {
  .live-card { grid-template-columns: 1fr minmax(240px, 290px); align-items: center; }
  .live-card__facts { flex-direction: row; flex-wrap: wrap; gap: var(--sp-6); }
  .live-card__aside { display: block; }
}

/* ==========================================================================
   Our Story
   ========================================================================== */
.story__grid { display: grid; gap: clamp(2rem, 6vw, 4rem); align-items: center; }

.story__media { margin: 0; position: relative; }
.story__media .ph { border: 1px solid var(--c-gold-24); }
.story__media::after {                         /* offset gold frame */
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--c-gold-24);
  border-radius: var(--radius-card);
  pointer-events: none;
  z-index: -1;
}
.story__caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

.story__body > p { color: var(--c-text-mute); }
.story__lede {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--c-text) !important;
  margin-bottom: var(--sp-5);
}
.story__actions { margin-top: var(--sp-8); }

@media (min-width: 900px) {
  .story__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* ==========================================================================
   Galleries
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.gallery-card__link { display: block; color: inherit; }
.gallery-card__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-gold-12);
  border-radius: var(--radius-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gallery-card__media .ph { transition: transform .7s var(--ease-out); }
.gallery-card__link:hover .ph { transform: scale(1.05); }
.gallery-card__link:hover .gallery-card__media,
.gallery-card__link:focus-visible .gallery-card__media {
  border-color: var(--c-gold-40);
  box-shadow: 0 0 34px rgba(212, 168, 87, .16);
}

.gallery-card__meta { padding-top: var(--sp-4); }
.gallery-card__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
  transition: color var(--dur-fast) var(--ease);
}
.gallery-card__link:hover .gallery-card__title { color: var(--c-gold-lt); }
.gallery-card__date {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-gold);
  letter-spacing: .06em;
}
.gallery-card__count {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.section-foot { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }

@media (min-width: 640px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Shop
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.6vw, 2rem);
}

.product-card__link { display: block; color: inherit; }
.product-card__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-gold-12);
  border-radius: var(--radius-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-card__media .ph { transition: transform .7s var(--ease-out); }
.product-card__link:hover .ph { transform: scale(1.045); }
.product-card__link:hover .product-card__media,
.product-card__link:focus-visible .product-card__media {
  border-color: var(--c-gold-40);
  box-shadow: 0 0 30px rgba(212, 168, 87, .15);
}

.product-card__tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  padding: 3px 9px;
  font-size: .54rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-gold);
  border-radius: var(--radius);
}
.product-card__tag--muted { background: rgba(232, 224, 210, .82); }

.product-card__name {
  font-size: var(--fs-h4);
  margin: var(--sp-4) 0 var(--sp-1);
  transition: color var(--dur-fast) var(--ease);
}
.product-card__link:hover .product-card__name { color: var(--c-gold-lt); }
.product-card__spec {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
  letter-spacing: .04em;
}
.product-card__price {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.2rem;
  color: var(--c-gold);
  letter-spacing: .02em;
}

@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   News
   ========================================================================== */
.news-list { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
.news-item { display: flex; flex-direction: column; }

.news-item__media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--c-gold-12);
  border-radius: var(--radius-card);
  margin-bottom: var(--sp-5);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.news-item__media .ph { transition: transform .7s var(--ease-out); }
.news-item:hover .news-item__media { border-color: var(--c-gold-40); box-shadow: 0 0 30px rgba(212, 168, 87, .14); }
.news-item:hover .news-item__media .ph { transform: scale(1.05); }

.news-item__date {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-3);
}
.news-item__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.news-item__title a { color: inherit; }
.news-item__title a:hover { color: var(--c-gold-lt); }
.news-item p { font-size: var(--fs-sm); color: var(--c-text-mute); margin-bottom: var(--sp-4); }
.news-item .link-more { margin-top: auto; align-self: flex-start; }

@media (min-width: 768px) { .news-list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); } }

/* (content-visibility was removed here: it could leave sections blank by
   suppressing the IntersectionObserver that drives .reveal) */

/* ==========================================================================
   Phones — simplify rather than shrink
   ========================================================================== */
@media (max-width: 767px) {
  /* Live Updates: badge and heading on one line, facts stacked and roomy */
  .live__head { gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .live__heading { font-size: 1.25rem; }
  .live__meta { width: 100%; }
  .live-card { padding: var(--sp-5); }
  .live-card__title { font-size: 1.45rem; margin-bottom: var(--sp-4); }
  .live-card__kicker { font-size: var(--fs-xs); }
  .live-card .btn { width: 100%; }

  /* Our Story: no offset frame — it only crowds a narrow column */
  .story__media::after { display: none; }
  .story__actions .btn { width: 100%; }

  /* Section intros are tighter on a phone */
  .section-head { margin-bottom: var(--sp-8); }
  .section-head p { font-size: 1rem; }

  /* Two products per row reads better than one giant card */
  .product-grid { gap: var(--sp-4); }
  .product-card__name { font-size: 1rem; margin-top: var(--sp-3); }
  .product-card__spec { display: none; }        /* detail belongs on the product page */
  .product-card__price { font-size: 1.05rem; }
  .product-card__tag { font-size: .48rem; padding: 2px 6px; }

  /* Galleries and News: full-width cards, generous spacing */
  .gallery-card__meta { padding-top: var(--sp-3); }
  .news-list { gap: var(--sp-10); }

  .section-foot .btn { width: 100%; }
}

@media (max-width: 359px) {
  .product-grid { grid-template-columns: 1fr; }
}