/* ============================================================
   BLACK PEARL — HOMEPAGE VISUAL EXPERIMENT (structural rebuild)
   Loaded only by index.html. Does not affect any other page.

   SYSTEM: a sequence of rectangular modules on one 12-col grid,
   separated by hard 1px rules. No freeform positioning, no
   negative margins, no overlaps, no large blank ivory bands.

   TYPE ROLES (do not mix):
   1. Display — .hx-display (Switzer 700, uppercase, tight) —
      the dominant voice: masthead, hero, section titles,
      category names.
   2. Serif   — .hx-serif-quiet / .hx-h2-quiet (Cormorant
      Garamond) — exactly two moments: the intro editorial line
      and the Membership proposition. Nowhere else.
   3. Sans    — .hx-label / .hx-body / .hx-link / .hx-btn
      (Switzer/Inter) — nav, metadata, labels, CTAs, body copy.
   ============================================================ */

:root{
  --hx-paper:#F1EFE9;
  --hx-ink:#171714;
  --hx-white:#FAFAF7;
  --hx-muted:#8f8c83;
  --hx-rule:rgba(23,23,20,.5);

  --hx-editorial:'Cormorant Garamond', Georgia, serif;

  --hx-max:1360px;
  --hx-margin:64px;
  --hx-gap:32px;

  --module-lg:72px;
  --module-md:56px;
  --module-sm:48px;
  --module-lg-m:44px;
  --module-md-m:36px;
  --module-sm-m:32px;
}

.hx-page{background:var(--hx-paper);color:var(--hx-ink)}
.hx-page main{overflow:hidden}

/* ---------- One container ---------- */
.hx-container{max-width:var(--hx-max);margin:0 auto;padding:0 var(--hx-margin)}
@media(max-width:900px){.hx-container{padding:0 24px}}

/* ---------- Rules — every module is closed by a hard line ---------- */
.hx-rule-top{border-top:1px solid var(--hx-rule)}
.hx-rule-bottom{border-bottom:1px solid var(--hx-rule)}

/* ---------- Type ---------- */
.hx-label{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--hx-muted);font-weight:500;display:block}
.hx-display{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em;line-height:.96;font-size:clamp(30px,3.8vw,52px)}
.hx-display-sm{font-size:clamp(22px,2.2vw,28px)}
.hx-display-md{font-size:clamp(26px,3vw,36px)}
.hx-h2-quiet{font-family:var(--hx-editorial);font-weight:400;line-height:1.15;letter-spacing:-0.005em;font-size:clamp(26px,2.6vw,36px)}
.hx-serif-quiet{font-family:var(--hx-editorial);font-style:italic;font-size:19px;line-height:1.5;color:var(--hx-ink);max-width:40em}
.hx-body{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--hx-ink);max-width:34em}
.hx-quote-inline{font-family:var(--sans);font-style:italic;font-size:14px;line-height:1.55;color:var(--hx-muted);border-left:2px solid var(--hx-rule);padding-left:14px;max-width:32em}

.hx-link{font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--hx-ink);border-bottom:1px solid rgba(23,23,20,.45);padding-bottom:3px;display:inline-flex;align-items:center;gap:8px;transition:border-color .3s ease,gap .3s ease}
.hx-link:hover{border-color:var(--hx-ink);gap:12px}

.hx-btn{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--hx-ink);border:1px solid var(--hx-ink);padding:13px 24px;display:inline-flex;align-items:center;gap:8px;background:transparent;transition:background .25s ease,color .25s ease}
.hx-btn:hover{background:var(--hx-ink);color:var(--hx-white)}

/* ---------- Strict 12-column grid ---------- */
.grid12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--hx-gap);align-items:start}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-12{grid-column:1/-1}
@media(max-width:900px){
  .grid12{grid-template-columns:1fr;row-gap:0}
  .span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:1/-1}
}

/* ---------- Divided grid — hard vertical rule between columns ---------- */
.hx-divided{column-gap:0}
.hx-divided>[class^="span-"]{padding-right:calc(var(--hx-gap) / 2)}
.hx-divided>[class^="span-"]+[class^="span-"]{padding-left:calc(var(--hx-gap) / 2);padding-right:0;border-left:1px solid var(--hx-rule)}
@media(max-width:900px){
  .hx-divided>[class^="span-"]{padding:0}
  .hx-divided>[class^="span-"]+[class^="span-"]{padding-top:24px;margin-top:24px;padding-left:0;border-left:0;border-top:1px solid var(--hx-rule)}
}

/* ---------- Image ratio system — 3:2 and 16:9 only ---------- */
.hx-img-wrap{overflow:hidden;position:relative;display:block}
.hx-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.ratio-landscape{aspect-ratio:3/2}
.ratio-wide{aspect-ratio:16/9}

/* ---------- Module 1 — masthead: compact, not a tall band ---------- */
.hx-m1{padding:128px 0 28px}
@media(max-width:900px){.hx-m1{padding:112px 0 24px}}

/* ---------- Module padding scale ----------
   hx-m3 (the "01/Black Pearl" quote) and hx-m6 (Built From Community) were removed from the
   homepage's editorial simplification pass — their selectors are dropped here too rather than
   left as dead rules. hx-m1/m4/m5/m7/m8/m9/m10 are unchanged; each module still closes with
   its own rule, so removing a module never leaves an orphaned gap in this system. */
.hx-m2,.hx-m4,.hx-m5,.hx-m7{padding:var(--module-lg) 0}
.hx-m8{padding:var(--module-md) 0}
.hx-m9,.hx-m10{padding:var(--module-sm) 0}
@media(max-width:900px){
  .hx-m2,.hx-m4,.hx-m5,.hx-m7{padding:var(--module-lg-m) 0}
  .hx-m8{padding:var(--module-md-m) 0}
  .hx-m9,.hx-m10{padding:var(--module-sm-m) 0}
}

/* ---------- Experiences — bordered module grid, no gaps, shared hairlines ---------- */
.hx-cells{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hx-rule);border-left:1px solid var(--hx-rule)}
.hx-cell{border-right:1px solid var(--hx-rule);border-bottom:1px solid var(--hx-rule);padding:28px}
.hx-cell-full{grid-column:1/-1}
.hx-cell .entry-label{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hx-muted)}
.hx-cell .entry-name{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;font-size:clamp(19px,1.8vw,23px);margin:10px 0 14px}
@media(max-width:900px){.hx-cells{grid-template-columns:1fr}}

/* ---------- Black Pearl Life — three equal 3:2 images, hard dividers ---------- */
.life-row{display:grid;grid-template-columns:repeat(3,1fr);column-gap:0}
.life-row .life-col{padding-right:calc(var(--hx-gap) / 2)}
.life-row .life-col+.life-col{padding-left:calc(var(--hx-gap) / 2);padding-right:0;border-left:1px solid var(--hx-rule)}
@media(max-width:700px){
  .life-row{grid-template-columns:1fr;row-gap:20px}
  .life-row .life-col{padding:0}
  .life-row .life-col+.life-col{padding:20px 0 0;border-left:0;border-top:1px solid var(--hx-rule)}
}

/* ---------- Partnership — quieter register than Membership ---------- */
.ch-partners .hx-display{font-size:clamp(20px,2.2vw,26px)}

/* ---------- Nav — unchanged from prior approved pass ---------- */
body.hx-page header{padding:30px 0}
body.hx-page .navwrap{padding:0 var(--hx-margin)}
body.hx-page nav.desktop-nav{gap:34px}
body.hx-page nav.desktop-nav a{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}
body.hx-page .btn.nav-cta{background:none;border:0;padding:0;text-decoration:none;position:relative;color:inherit!important}
body.hx-page .btn.nav-cta:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;opacity:.5}
@media(max-width:700px){body.hx-page .navwrap{padding:0 20px}}

/* ---------- Colour + motion experiment — homepage only, Phase 1 ----------
   Two deliberate colour-field moments (Experiences = forest, Partnerships = burgundy).
   Everything else on the homepage stays ivory/black as before. Additive classes only —
   removing hx-field-forest/hx-field-burgundy from the two sections fully reverts this. */
.hx-field-forest,.hx-field-burgundy{color:var(--hx-white)}
.hx-field-forest{background:var(--forest)}
.hx-field-burgundy{background:var(--burgundy)}
.hx-field-forest.hx-rule-top,.hx-field-burgundy.hx-rule-top{border-top-color:rgba(250,250,247,.18)}
.hx-field-forest.hx-rule-bottom,.hx-field-burgundy.hx-rule-bottom{border-bottom-color:rgba(250,250,247,.18)}
.hx-field-forest .hx-label,.hx-field-burgundy .hx-label{color:rgba(250,250,247,.6)}
.hx-field-forest .hx-display,.hx-field-burgundy .hx-display,
.hx-field-forest .hx-h2-quiet,.hx-field-burgundy .hx-h2-quiet{color:var(--hx-white)}
.hx-field-forest .hx-body,.hx-field-burgundy .hx-body{color:rgba(250,250,247,.82)}
.hx-field-forest .hx-link,.hx-field-burgundy .hx-link{color:var(--hx-white);border-bottom-color:rgba(250,250,247,.45)}
.hx-field-forest .hx-link:hover,.hx-field-burgundy .hx-link:hover{border-color:var(--champagne);color:var(--champagne)}
.hx-field-forest .entry-label,.hx-field-burgundy .entry-label{color:rgba(250,250,247,.55)}
.hx-field-forest .entry-name,.hx-field-burgundy .entry-name{color:var(--hx-white)}
.hx-field-forest .hx-cells,.hx-field-burgundy .hx-cells{border-top-color:rgba(250,250,247,.18);border-left-color:rgba(250,250,247,.18)}
.hx-field-forest .hx-cell,.hx-field-burgundy .hx-cell{border-right-color:rgba(250,250,247,.18);border-bottom-color:rgba(250,250,247,.18)}

/* ---------- Third dark-field variant: black, for the darker-theme prototype ----------
   Purely additive — mirrors .hx-field-forest/.hx-field-burgundy above exactly. */
.hx-field-black{background:var(--hx-ink);color:var(--hx-white)}
.hx-field-black.hx-rule-top{border-top-color:rgba(250,250,247,.18)}
.hx-field-black.hx-rule-bottom{border-bottom-color:rgba(250,250,247,.18)}
.hx-field-black .hx-label{color:rgba(250,250,247,.6)}
.hx-field-black .hx-display{color:var(--hx-white)}
.hx-field-black .hx-link{color:var(--hx-white);border-bottom-color:rgba(250,250,247,.45)}
.hx-field-black .hx-link:hover{border-color:var(--champagne);color:var(--champagne)}

/* ================================================================
   TRANSPARENCY SYSTEM — the reusable .bp-glass / .bp-glass--dark /
   .bp-glass--light / .bp-glass-caption / .bp-glass-meta classes now
   live in css/style.css (shared site-wide, since the darker-theme
   prototype spans four pages, not just this one). Only this hero-
   specific positioning rule stays here.
   ================================================================ */
/* Hero panel — overlaps the hero photograph's right edge on purpose, breaking past the
   grid's own divider line (a deliberate layered-rectangle effect), rather than sitting
   neatly inside its column. The divider itself stays put on the column; only this inner
   panel shifts left. Overlap removed on mobile, where image and text already stack. */
.bp-hero-panel{padding:40px 36px;position:relative;z-index:1;margin-left:-88px}
@media(max-width:900px){.bp-hero-panel{margin-left:0;padding:28px 24px}}