/* =========================================================================
   shift-join.css — four ways to mark the hero / section boundary.

   The section reads as floating because nothing changes at the join. The
   hero resolves to pure black at its lower edge and the section opens on
   pure black, so there is no edge, no value step and no marker — the
   content simply appears in the same void the hero ended in.

   Each variant changes one thing at the boundary. The section itself is
   identical in all four.
   ========================================================================= */

.jn-label{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:14px 40px;background:#171413;border-top:1px solid rgba(255,255,255,.09);
  color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.jn-label b{font-weight:700}
.jn-label span{color:rgba(255,255,255,.42);letter-spacing:.06em;text-transform:none;font-size:12.5px}

/* =====================================================================
   1 — LIFT
   The section sits on its own ground, a few values above the hero's black,
   with a hairline at the meeting point. The smallest possible change that
   still reads as a plane rather than a void: you can see where one surface
   ends and the next begins.
   ===================================================================== */

.hx--lift{background:#131110;border-top:1px solid rgba(246,241,234,.12)}

/* =====================================================================
   2 — FLIP
   The value inverts. Dark hero, light section. The most decisive answer,
   and the one that makes the page feel authored rather than continuous —
   but it commits the site to two grounds rather than one.
   ===================================================================== */

.hx--bone{background:#EFEAE2;color:#15110F}
.hx--bone .hx-eyebrow{color:rgba(21,17,15,.55)}
.hx--bone .hx-sub{color:rgba(21,17,15,.62)}
.hx--bone .hx-tabs{border-bottom-color:rgba(21,17,15,.16)}
.hx--bone .hx-rule{background:#15110F}
.hx--bone .hx-tab{color:rgba(21,17,15,.34)}
.hx--bone .hx-tab:hover{color:rgba(21,17,15,.62)}
.hx--bone .hx-tab.is-on{color:#15110F}
.hx--bone .hx-side--b .hx-tag{color:rgba(21,17,15,.36)}
.hx--bone .hx-side--a .hx-tag{color:rgba(21,17,15,.6)}
.hx--bone .hx-side--b .hx-line{color:rgba(21,17,15,.38)}
.hx--bone .hx-side--a .hx-line{color:#15110F}
.hx--bone .hx-arrow{color:rgba(21,17,15,.5)}
.hx--bone .hx-nudge{color:rgba(21,17,15,.34)}

/* =====================================================================
   3 — SEAM
   The hero's vertical split does not stop at the hero. It carries on down
   through the top of the section and fades out, so the two are stitched by
   the line the hero is built on rather than separated by an edge.
   ===================================================================== */

.hx--seam{position:relative;border-top:1px solid rgba(246,241,234,.10)}
.hx--seam::before{
  content:"";position:absolute;left:50%;top:0;width:1px;height:190px;
  transform:translateX(-.5px);
  background:linear-gradient(180deg,rgba(246,241,234,.34),rgba(246,241,234,0));
}

/* =====================================================================
   4 — MARKER
   A rule across the full width with the section's name set into it, the
   way a chapter break works. Nothing about the ground changes; the page
   simply announces that a new part has started.
   ===================================================================== */

.jn-marker{
  display:flex;align-items:center;
  padding:0 var(--hx-inset);
  background:var(--n12-black);
}
/* The label sits flush to the section's inset — no leading gap — so it lines
   up with the heading below it rather than floating 20px to its right. */
.jn-marker span{
  flex:0 0 auto;padding:26px 20px 26px 0;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,241,234,.7);
}
.jn-marker::after{content:"";flex:1;height:1px;background:rgba(246,241,234,.16)}

/* The marker says "before / after", so the section's own eyebrow would say it
   a second time three lines later. One of them has to go. */
.hx--marked{padding-top:58px}
.hx--marked .hx-eyebrow{display:none}

@media(max-width:900px){
  .hx--seam::before{height:120px}
  .jn-marker{gap:14px}
}