/* Black Pearl Experiences — page-scoped, loaded only by events.html.
   Reuses design-system.css tokens (--hx-ink, --hx-paper, --hx-muted, --hx-rule, --hx-white,
   --hx-editorial, --hx-max, --hx-margin) and style.css's palette (--forest, --burgundy,
   --champagne, --champagne-deep, --black, --soft-white, --grey). An editorial record of real
   experiences, not an events directory: no boxed cards, no repeated grids.

   Section rhythm on this page intentionally runs tighter than design-system.css's shared
   --module-lg/md/sm (72/56/48px), which stay untouched for every other interior page. */
.exp-section{padding:64px 0}
.exp-section-tight{padding:44px 0}
@media(max-width:900px){.exp-section{padding:44px 0}.exp-section-tight{padding:32px 0}}

/* ---------- Hero — split screen ---------- */
.exp-hero{display:grid;grid-template-columns:42fr 58fr;align-items:stretch;height:clamp(520px,78vh,720px)}
.exp-hero-text{padding:48px var(--hx-margin);display:flex;flex-direction:column;justify-content:center;overflow:auto}
.exp-hero-eyebrow{margin-bottom:18px}
.exp-hero-title{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-0.03em;line-height:.9;font-size:clamp(48px,6.4vw,80px);color:var(--black);margin:0 0 20px}
.exp-hero-rule{width:56px;height:2px;background:var(--champagne-deep);border:0;margin:0 0 20px}
.exp-hero-sub{font-family:var(--hx-editorial);font-weight:400;font-style:normal;font-size:clamp(21px,2.2vw,28px);line-height:1.22;color:var(--black);margin:0 0 16px}
.exp-hero-body{font-family:var(--body);font-size:15px;line-height:1.65;color:var(--grey);max-width:34em;margin:0}
.exp-hero-media{position:relative;overflow:hidden;height:100%}
.exp-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .exp-hero{grid-template-columns:1fr;height:auto}
  .exp-hero-text{padding:36px 24px 28px}
  .exp-hero-media{height:70vw}
}

/* ---------- What We Create — full-bleed burgundy, four ruled columns ---------- */
.exp-create{background:var(--burgundy);color:var(--soft-white)}
.exp-create-eyebrow{color:var(--champagne);margin-bottom:28px}
.exp-create-cols{display:grid;grid-template-columns:repeat(4,1fr)}
.exp-create-col{padding:0 28px}
.exp-create-col:first-child{padding-left:0}
.exp-create-col:last-child{padding-right:0}
.exp-create-col+.exp-create-col{border-left:1px solid rgba(250,250,247,.18)}
.exp-create-num{display:block;font-family:var(--hx-editorial);font-style:italic;font-size:26px;color:var(--champagne);margin-bottom:14px}
.exp-create-name{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-0.005em;font-size:15px;color:var(--soft-white);margin:0 0 10px}
.exp-create-desc{font-family:var(--body);font-size:14.5px;line-height:1.6;color:rgba(252,251,248,.75);margin:0}
@media(max-width:900px){
  .exp-create-cols{grid-template-columns:1fr 1fr;row-gap:32px}
  .exp-create-col{border-left:0!important;padding:0}
  .exp-create-col:nth-child(odd){padding-right:16px}
  .exp-create-col:nth-child(even){padding-left:16px;border-left:1px solid rgba(250,250,247,.18)!important}
}
@media(max-width:520px){
  .exp-create-cols{grid-template-columns:1fr;row-gap:26px}
  .exp-create-col:nth-child(even){padding-left:0;border-left:0!important}
}

/* ---------- Featured Experiences — editorial intro + horizontal carousel ---------- */
.exp-featured-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:32px;flex-wrap:wrap}
.exp-featured-intro{max-width:34em}
.exp-featured-intro .hx-label{margin-bottom:12px}
.exp-featured-tag{font-family:var(--hx-editorial);font-style:italic;font-size:19px;line-height:1.5;color:var(--hx-ink);margin:0 0 14px}
.exp-featured-nav{display:flex;gap:8px;flex-shrink:0}
.exp-featured-nav button{width:40px;height:40px;border:1px solid var(--hx-rule);background:transparent;color:var(--hx-ink);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .25s ease,color .25s ease,border-color .25s ease}
.exp-featured-nav button:hover{background:var(--hx-ink);color:var(--hx-white);border-color:var(--hx-ink)}
.exp-featured-nav button:disabled{opacity:.3;cursor:default}
.exp-featured-nav button:disabled:hover{background:transparent;color:var(--hx-ink);border-color:var(--hx-rule)}

/* #featured is a hard clipping boundary around the carousel, independent of the
   negative-margin/padding cancellation below — that arithmetic lands the carousel's
   own box exactly at the viewport edge in most browsers, but sub-pixel rounding
   (86vw slide widths, gap, scroll-snap) can leak a few px past it and grow
   document.documentElement.scrollWidth even though nothing is visibly cut off.
   overflow-x:hidden here guarantees no page-level horizontal scrollbar can ever
   result, while .exp-carousel's own overflow-x:auto below still drives the actual
   horizontal scroll/swipe interaction — unchanged. */
#featured{overflow-x:hidden}
.exp-carousel{display:flex;align-items:flex-start;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--hx-margin);scroll-behavior:smooth;padding-bottom:8px;margin:0 calc(var(--hx-margin) * -1);padding-left:var(--hx-margin);padding-right:var(--hx-margin)}
.exp-carousel::-webkit-scrollbar{display:none}
.exp-carousel{scrollbar-width:none}
/* ---------- Shared experience-card frame — every carousel item (named event or general
   photography) is ONE card at this exact outer width, sharing this single rule so the two
   types can never diverge. An event card's wording sits inside the card, below its photo —
   it is not a separate carousel slide — so text length changes card height, never width.
   Single source of truth: change --exp-frame-w / --exp-frame-ratio here and every card and
   every photograph updates together. ---------- */
:root{
  --exp-frame-w: 380px;
  --exp-frame-w-mobile: 86vw;
  --exp-frame-ratio: 4/5;
}

.exp-slide,.exp-slide-photo{flex:0 0 auto;width:var(--exp-frame-w);scroll-snap-align:start}
.exp-slide{display:flex;flex-direction:column;gap:20px}

.exp-slide-media{overflow:hidden;width:100%}
.exp-slide-media .exp-ratio,.exp-slide-photo .exp-ratio{aspect-ratio:var(--exp-frame-ratio);overflow:hidden}
.exp-slide-media .exp-ratio img,.exp-slide-photo .exp-ratio img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.exp-slide-media:hover .exp-ratio img,.exp-slide-photo:hover .exp-ratio img{transform:scale(1.035)}
.exp-slide-tags{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--champagne-deep);margin-bottom:12px}
.exp-slide-title{font-family:var(--hx-editorial);font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.08;color:var(--hx-ink);margin:0 0 12px}
.exp-slide-meta{font-family:var(--sans);font-size:12px;letter-spacing:.03em;color:var(--hx-muted);line-height:1.6;margin:0 0 14px}
.exp-slide-meta span{display:block}
.exp-slide-summary{font-family:var(--body);font-size:14.5px;line-height:1.65;color:var(--grey);margin:0 0 14px}
.exp-slide-partner{font-family:var(--sans);font-size:12px;letter-spacing:.03em;color:var(--champagne-deep);margin:0 0 16px}
.exp-slide-photo .exp-slide-tags{margin:14px 0 0}
@media(max-width:700px){
  .exp-carousel{margin:0 -24px;padding-left:24px;padding-right:24px;gap:24px;scroll-padding-left:24px}
  .exp-slide,.exp-slide-photo{width:var(--exp-frame-w-mobile)}
}

/* ---------- Text-only featured moment (no verified photography for this experience) ---------- */
.exp-moment{padding:56px var(--hx-margin)}
.exp-moment.exp-field-forest{background:var(--forest);color:var(--soft-white)}
.exp-moment.exp-field-ink{background:var(--black);color:var(--soft-white)}
.exp-moment-tags{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--champagne);margin-bottom:14px}
.exp-moment-title{font-family:var(--hx-editorial);font-weight:500;font-size:clamp(28px,3.2vw,42px);line-height:1.05;color:inherit;margin:0 0 12px}
.exp-moment-meta{font-family:var(--sans);font-size:12px;letter-spacing:.03em;color:rgba(255,255,255,.55);margin:0 0 16px}
.exp-moment-meta span:not(:first-child){margin-left:12px}
.exp-moment-meta span:not(:first-child)::before{content:"\00b7";margin-right:12px;opacity:.6}
.exp-moment-summary{font-family:var(--body);font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:38em;margin:0 0 14px}
.exp-moment-partner{font-family:var(--sans);font-size:12px;letter-spacing:.03em;color:var(--champagne);margin:0}
@media(max-width:700px){.exp-moment{padding:40px 24px}}

/* ---------- Archive — More From Black Pearl ---------- */
/* One shared grid across every row (rows are display:contents) so columns stay aligned even
   when a row has no date/venue (e.g. Sundown Social, which has neither confirmed). */
/* #exp-archive is a hard clipping boundary for the same reason as #featured above: the
   archive rows use display:contents (so each row's cells become direct grid items of
   .exp-archive below) — a combination with a documented cross-browser grid track-sizing
   quirk where auto/1fr columns can compute a wider-than-container intrinsic size that
   leaks into document.scrollWidth, even though nothing is visibly clipped or misaligned.
   overflow-x:hidden here guarantees no page-level horizontal scrollbar can result; the
   grid's own column widths and row layout are completely unaffected. */
#exp-archive{overflow-x:hidden}
.exp-archive{border-top:1px solid var(--hx-rule);display:grid;grid-template-columns:36px 1fr auto auto auto 20px;column-gap:20px}
.exp-archive-row{display:contents}
.exp-archive-row>*{align-self:center;padding:16px 0;border-bottom:1px solid var(--hx-rule);transition:padding-left .3s ease}
.exp-archive-row:hover>*{padding-left:4px}
.exp-archive-num{font-family:var(--sans);font-size:11.5px;color:var(--hx-muted)}
.exp-archive-title{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-0.005em;font-size:15px}
.exp-archive-category{font-family:var(--sans);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--champagne-deep);white-space:nowrap}
.exp-archive-date{font-family:var(--sans);font-size:12px;color:var(--hx-muted);text-align:right;white-space:nowrap}
.exp-archive-venue{font-family:var(--sans);font-size:12px;color:var(--hx-muted);text-align:right;white-space:nowrap}
.exp-archive-arrow{font-family:var(--sans);font-size:14px;color:var(--hx-rule);transition:color .3s ease,transform .3s ease}
.exp-archive-row:hover .exp-archive-arrow{color:var(--hx-ink);transform:translateX(4px)}
@media(max-width:820px){
  .exp-archive{grid-template-columns:24px 1fr auto 0 0 0}
  .exp-archive-row>*{padding:14px 0}
  .exp-archive-category,.exp-archive-venue,.exp-archive-arrow{display:none}
}

/* ---------- Final CTA ---------- */
.exp-cta{background:var(--burgundy);color:var(--soft-white)}
.exp-cta .hx-display{color:var(--soft-white)}
.exp-cta .hx-body{color:rgba(255,255,255,.85)}
.exp-cta .btn-primary{background:var(--soft-white);color:var(--black);border-radius:0}
.exp-cta .btn-primary:hover{background:var(--champagne)}

/* ---------- Empty state (no upcoming experiences) collapses to nothing, not a placeholder ---------- */
[data-exp-upcoming][hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .exp-carousel{scroll-behavior:auto}
  .exp-slide-media .exp-ratio img{transition:none}
  .exp-archive-row{transition:none}
}