/**
 * BeMatrx — "Ephemera" sub-page design system (production stylesheet)
 * =====================================================================
 * Design language: light editorial canvas + printed artifacts of a
 * chosen life (tickets, passport stamps, crew badges, boarding passes,
 * photo prints). Darkness lives INSIDE artifacts, never as page bg.
 *
 * Source of truth: docs/DESIGN.md (§1-§4, §7, §8). Reference mockup:
 * _design/ephemera.css + page-local <style> blocks in _design/about.html
 * and _design/careers.html. This file is a 1:1 port with every class
 * prefixed `bm-` so it coexists with the rest of the site's CSS. Site
 * chrome (header/nav/footer/container/resets) is NOT ported here — the
 * real site already has it; use `.bm-container` for layout width.
 *
 * Depends on tokens in style.css (--bm-dark, --bm-text-muted, --bm-border,
 * --bm-bg, --bm-bg-alt, --bm-primary, --bm-primary-soft, --bm-gold,
 * --bm-radius-*, --bm-shadow-*, --bm-ease-out, --bm-dur-*,
 * --bm-text-on-dark-muted) plus the ephemera token delta added to
 * style.css :root (--bm-font-print, --bm-stamp-red/indigo/teal/amber,
 * --bm-night-grad-pass, --bm-night-grad-ticket, --bm-shadow-print,
 * --bm-shadow-pass — see DESIGN.md §2).
 *
 * Component-scoped custom properties (--c, --r, --w, --tint,
 * --print-ratio) are LOCAL to a component instance (set inline by the
 * consuming markup, e.g. style="--c: var(--bm-stamp-teal)") — they are
 * not global design tokens and intentionally keep short names, matching
 * the mockup so markup ports over almost verbatim.
 *
 * Mockup class -> shipped class map
 * ----------------------------------
 *  .stamp (+--indigo/--teal/--amber)  -> .bm-stamp (+ modifiers)
 *  .print / .print-pile               -> .bm-print / .bm-print-pile
 *  .stamp-ring / .stamp-rect          -> .bm-stamp-ring / .bm-stamp-rect
 *  .pass / .pass__*                   -> .bm-pass / .bm-pass__*  (BEM)
 *  .barcode                           -> .bm-barcode
 *  .ticket-strip / .store-badges      -> .bm-ticket-strip / .bm-closing__stores
 *                                         (badges renamed again 2026-07-26 —
 *                                         see the block near the bottom)
 *  .crew-badge / .badge-wall          -> .bm-crew-badge / .bm-badge-wall
 *  .counter / .counter-row            -> .bm-counter / .bm-counter-row
 *  .mono-chip                         -> .bm-mono-chip
 *  .doc-card (+__head/__no)           -> .bm-letterhead (+__head/__no/__title/__body)
 *                                         renamed (not .bm-doc-card) — .bm-doc
 *                                         collided with doc-pages.css, which
 *                                         has since been deleted (dead code,
 *                                         2026-07-13); name kept as-is.
 *  .print-label                       -> .bm-print-label (+ --gold/--muted/--on-dark)
 *  .display / .h2 / .lead             -> .bm-sub-display / .bm-sub-h2 / .bm-sub-lead
 *  .display .dim / .accent            -> .bm-sub-dim / .bm-sub-accent (shared utility,
 *                                         also used by .bm-manifesto's accent line)
 *  .manifesto                         -> .bm-manifesto
 *  .section (+--tint/--tight)         -> .bm-sub-section (+ modifiers)
 *  .split                             -> .bm-sub-split
 *  .anim-stamp / .anim-print          -> .bm-anim-stamp / .bm-anim-print
 *  @keyframes print-drop/stamp-press  -> bm-print-drop / bm-stamp-press
 *  --- page-local (about.html / careers.html), generalized ---
 *  .hero (+::before tint)             -> .bm-sub-hero (tint via --bm-sub-hero-tint-a/-b)
 *  .pile (+.print--a/b/c)             -> .bm-pile (+.bm-pile__a/b/c)
 *  .xp-chip / .xp-chip .coin          -> .bm-xp-chip / .bm-xp-chip__coin
 *  .stamps-band/-row/-head, .route    -> .bm-stamps-band/-row/-head, .bm-stamps-row__route
 *  .mani-grid                         -> .bm-mani-grid
 *  .step-pair (+ .arrow)              -> .bm-step-pair (+ .bm-step-pair__arrow)
 *  .print--before img grayscale       -> .bm-print--mono img (reusable modifier)
 *  .studio-grid / .studio-side        -> .bm-studio-grid / .bm-studio-side
 *  .closing-inner                     -> .bm-closing
 *  .contact-head                      -> .bm-contact-head
 *  .hero-pass (careers)               -> .bm-hero-pass
 *  .scene-row                         -> .bm-scene-row
 *  .apply-wrap / .apply-note          -> .bm-apply-wrap / .bm-apply-note
 *  .badges-head                       -> .bm-badges-head
 *  DROPPED (mockup-only chrome): .site-header, .site-nav, .site-logo,
 *  .lang-pill, .site-footer, .container, body/html/* resets.
 *
 * @package BeMatrx
 * @since   2026-07-13
 */

/* =====================  Type scale  =============================== */

.bm-sub-display {
  font-size: clamp(2.6rem, 5.2vw + .6rem, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.bm-sub-h2 {
  font-size: clamp(1.7rem, 2.4vw + .6rem, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
  /* Default breathing room below the heading. Several sub-pages (Press,
     Community) put an h2 directly above a lead/grid with no wrapper —
     margin collapsing keeps this a no-op wherever a wrapper (.bm-stamps-head
     etc.) already sets its own, larger gap. */
  margin-bottom: 1.25rem;
}

.bm-sub-lead {
  font-size: clamp(1.05rem, .4vw + .95rem, 1.2rem);
  color: var(--bm-text-muted);
  max-width: 58ch;
  text-wrap: pretty;
}

/* Shared "dim" / "accent" line utilities — used inside .bm-sub-display's
   second headline line and .bm-manifesto's closing line. */
.bm-sub-dim { color: var(--bm-text-muted); }
.bm-sub-accent { color: var(--bm-primary); }

/* Print voice — ephemera labels only (<=4 words, uppercase ok) */
.bm-print-label {
  font-family: var(--bm-font-print);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bm-print-label--gold    { color: var(--bm-gold); }
.bm-print-label--muted   { color: var(--bm-text-muted); }
.bm-print-label--on-dark { color: var(--bm-text-on-dark-muted); }

/* Small reusable meta note (reply-time / helper copy next to a heading) */
.bm-sub-meta { font-size: .9rem; color: var(--bm-text-muted); }

/* =====================  Stamp chip (page kicker — hero only)  ==== */
/* .bm-stamp (base + --indigo/--teal/--amber/--on-dark modifiers,
   .bm-anim-stamp keyframe/class, [dir="rtl"] flip) moved to
   public/assets/style.css — 2026-07-13. It's a global component now:
   sub-page heroes use it here, the homepage hero uses --on-dark. */

/* =====================  Photo prints  ============================= */

.bm-print {
  margin: 0; /* kill the UA default figure margin (16px 40px) — the mockup's
                global reset covered this; the production page has no such reset */
  background: #fff;
  padding: 10px 10px 30px;
  border-radius: 4px;
  box-shadow: var(--bm-shadow-print);
  position: relative;
  rotate: var(--r, 0deg);
}
.bm-print img { border-radius: 2px; aspect-ratio: var(--print-ratio, 4 / 5); object-fit: cover; }
.bm-print figcaption {
  font-family: var(--bm-font-print);
  font-size: .62rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bm-text-muted);
  position: absolute; inset-inline-start: 12px; bottom: 9px;
}
/* Grayscale "before" variant (manifesto step-through) */
.bm-print--mono img { filter: grayscale(1) contrast(.95); }

/* Fanned pile (hero) — generic ephemera component */
.bm-print-pile { position: relative; }
.bm-print-pile .bm-print { position: absolute; width: var(--w, 46%); }

/* Page-local pile wrapper (about.html hero) — absolute children mean the
   parent cannot rely on stretch, it needs a definite width. */
.bm-pile {
  aspect-ratio: 10 / 11;
  width: min(520px, 100%);
  justify-self: center;
  position: relative;
}
/* Positions ported from _design/about.html — decorative/absolute, kept
   physical (left/right) per DESIGN.md §8 pile-print exception. */
.bm-pile__a { --w: 58%; --r: -5deg; left: 0; top: 6%; z-index: 2; }
.bm-pile__b { --w: 52%; --r: 4deg;  right: 0; top: 0; z-index: 1; }
.bm-pile__c { --w: 56%; --r: -1.5deg; left: 18%; bottom: 0; z-index: 3; }

/* Floating XP chip (about.html hero pile) */
.bm-xp-chip {
  position: absolute; z-index: 4; right: 4%; bottom: 26%;
  rotate: 6deg;
  background: #fff; border-radius: var(--bm-radius-full); box-shadow: var(--bm-shadow-print);
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .9rem;
  padding-block: .5rem; padding-inline: .55rem 1rem;
}
.bm-xp-chip__coin {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bm-gold); color: #5c4300;
  display: grid; place-content: center; font-size: .8rem; font-weight: 800;
}

/* =====================  Passport stamps (stat band)  ============== */

.bm-stamp-ring {
  --c: var(--bm-stamp-red);
  width: clamp(150px, 16vw, 190px);
  aspect-ratio: 1;
  border: 3px solid var(--c);
  border-radius: 50%;
  color: var(--c);
  display: grid; place-content: center; text-align: center;
  gap: .1rem;
  position: relative;
  rotate: var(--r, -4deg);
  background: radial-gradient(circle at 62% 34%, rgba(255,255,255,.5) 0 10%, transparent 11%);
}
.bm-stamp-ring::after {
  content: ""; position: absolute; inset: 6px;
  border: 1px dashed var(--c); border-radius: 50%; opacity: .6;
}
.bm-stamp-ring .num {
  font-family: var(--bm-font-print); font-weight: 700;
  font-size: clamp(2.6rem, 3.4vw, 3.4rem); line-height: 1;
  letter-spacing: -.02em;
}
.bm-stamp-ring .lbl {
  font-family: var(--bm-font-print); font-weight: 700;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
}
.bm-stamp-ring .sub {
  font-family: var(--bm-font-print);
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75;
}

.bm-stamp-rect {
  --c: var(--bm-stamp-indigo);
  border: 3px solid var(--c); border-radius: 10px;
  color: var(--c);
  padding: 1.1rem 1.6rem;
  text-align: center;
  rotate: var(--r, 3deg);
  position: relative;
}
.bm-stamp-rect::after {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid var(--c); border-radius: 6px; opacity: .5;
}

/* =====================  Boarding pass / ticket artifacts  ========= */

/* Shadow lives here, not on .bm-pass: the notches below are cut with a
   mask, and a mask erases everything the element paints outside its
   border box — box-shadow included (measured: it vanished). An own
   filter does not help either, since filters resolve BEFORE the mask, so
   the holes punch straight through the shadow and you get a bright disc
   again. On the parent the filter sees the already-masked card, so the
   shadow hugs the notch curves — what a punched ticket actually does. */
.bm-pass-wrap {
  filter:
    drop-shadow(0 20px 44px rgba(10, 14, 39, .30))
    drop-shadow(0 5px 12px rgba(10, 14, 39, .22));
}
.bm-hero-pass-wrap { max-width: 560px; width: 100%; justify-self: center; }

.bm-pass {
  --notch-r: 12px;
  --stub-w: 200px;
  --stub-h: 112px;
  /* Where the tear line meets the card edge. The stub is the 2nd grid
     item, so it sits on the left under RTL — flipped below. */
  --perf-x: calc(100% - var(--stub-w));
  /* Glossy-card highlight over the flat night gradient — a soft light
     catch top-left plus a faint sheen along the top edge, so the card
     reads as a printed/laminated object instead of a solid-fill div. */
  background:
    radial-gradient(120% 140% at 8% -10%, rgba(255,255,255,.10), transparent 55%),
    var(--bm-night-grad-pass);
  color: #fff;
  border-radius: var(--bm-radius-lg);
  /* inset only — an inset shadow paints inside the border box and so
     survives the mask. The outer shadow moved to .bm-pass-wrap. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  /* Real holes at the two ends of the tear line, not painted-on discs.
     They used to be white (--notch-bg) circles clipped to half by
     overflow:hidden — but the page behind sits under this card's wide
     shadow, so a pure-white disc read as a sticker rather than a punch
     (same defect as the ticket strip, reported 2026-07-15). Masking
     removes the pixels, so whatever is really behind shows through. */
  -webkit-mask-image:
    radial-gradient(circle var(--notch-r) at var(--perf-x) 0, transparent 0 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
    radial-gradient(circle var(--notch-r) at var(--perf-x) 100%, transparent 0 var(--notch-r), #000 calc(var(--notch-r) + .5px));
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle var(--notch-r) at var(--perf-x) 0, transparent 0 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
    radial-gradient(circle var(--notch-r) at var(--perf-x) 100%, transparent 0 var(--notch-r), #000 calc(var(--notch-r) + .5px));
  mask-composite: intersect;
  display: grid;
  /* minmax(0, 1fr), not 1fr — a bare 1fr track has an implicit min-width
     of its own min-content, so once the stub's content (barcode + "No.")
     needed more room than a narrow host column had to give, the whole
     grid overflowed its own overflow:hidden box instead of shrinking,
     clipping the doc number and barcode (Careers hero, 2026-07-14).
     The stub track is a fixed --stub-w rather than auto because the mask
     above needs the tear line's offset as a real length, and auto made it
     content-driven: the CTA stub swung 152->242px on translation length
     alone (it "Conservato in archivio"), which was its own inconsistency. */
  grid-template-columns: minmax(0, 1fr) var(--stub-w);
  overflow: hidden;
  position: relative;
}
/* RTL puts the stub (2nd item) on the left, and the tear line with it —
   the old physical `left: -13px` discs did not follow, so in Arabic they
   floated at the card's outer edge ~108px off the dashed line. Measured
   and fixed here. */
[dir="rtl"] .bm-pass { --perf-x: var(--stub-w); }
.bm-pass__main { padding: clamp(1.4rem, 2.6vw, 2.2rem); display: grid; gap: 1.4rem; }
.bm-pass__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.bm-pass__brand { font-family: var(--bm-font-print); font-weight: 700; font-size: .8rem; letter-spacing: .22em; }
.bm-pass__route { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.6rem); }
.bm-pass__code { font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.02em; line-height: 1.05; }
.bm-pass__code small { display: block; font-family: var(--bm-font-print); font-weight: 400; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bm-text-on-dark-muted); margin-top: .35rem; }
.bm-pass__plane { color: var(--bm-primary); flex: 1; display: flex; align-items: center; gap: .4rem; min-width: 60px; }
.bm-pass__plane::before, .bm-pass__plane::after { content: ""; flex: 1; border-top: 2px dashed rgba(255,255,255,.28); }
.bm-pass__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem 1.5rem; }
.bm-pass__field small { display: block; font-family: var(--bm-font-print); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bm-text-on-dark-muted); margin-bottom: .3rem; }
.bm-pass__field span { font-family: var(--bm-font-print); font-weight: 700; font-size: .95rem; }
.bm-pass__hot { color: var(--bm-gold); }

.bm-pass__stub {
  background: rgba(255,255,255,.03);
  border-inline-start: 2px dashed rgba(255,255,255,.35);
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.1rem, 2vw, 1.8rem);
  display: grid; align-content: space-between; justify-items: center; gap: 1rem;
  position: relative;
  min-width: 0;
}

.bm-barcode {
  width: 92px; height: 54px;
  /* Irregular bar widths per repeat unit (was a uniform 2/3/1px repeat,
     which reads as a mechanical stripe pattern rather than a barcode). */
  background: repeating-linear-gradient(90deg,
    #fff 0 3px, transparent 3px 5px,
    #fff 5px 6px, transparent 6px 9px,
    #fff 9px 12px, transparent 12px 14px,
    #fff 14px 15px, transparent 15px 19px);
  opacity: .92;
}

/* Wide ticket strip (closing CTA) */
.bm-ticket-strip {
  background: var(--bm-night-grad-ticket);
  color: #fff;
  border-radius: var(--bm-radius-xl);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.6rem, 4vw, 4rem);
  text-align: center;
  position: relative;
  /* Real holes, not painted discs. The notches used to be two 30px
     pseudo-element circles filled with --notch-bg (#fff) straddling the
     edge. The page behind IS white, but the strip casts a wide soft
     shadow onto it, so the surroundings are shadow-grey while the disc
     stayed pure white — it read as a sticker pasted on rather than a
     punch-out (reported 2026-07-15). Masking removes the pixels instead
     of repainting them, so whatever is actually behind (page + the
     strip's own shadow) shows through and it can never mismatch. */
  -webkit-mask-image:
    radial-gradient(circle 15px at 0 50%, transparent 0 15px, #000 15.5px),
    radial-gradient(circle 15px at 100% 50%, transparent 0 15px, #000 15.5px);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 15px at 0 50%, transparent 0 15px, #000 15.5px),
    radial-gradient(circle 15px at 100% 50%, transparent 0 15px, #000 15.5px);
  mask-composite: intersect;
}
/* The shadow has to live on an ancestor: a mask clips everything the
   element paints outside its border box, so box-shadow (and an own
   filter, which resolves before the mask) is erased by the rule above.
   On the parent the filter sees the already-masked child, so the shadow
   traces the notched silhouette — it curves around the holes, which is
   what a punched ticket actually does. Scoped with :has() because these
   closing sections wrap nothing but the strip. */
.bm-container:has(> .bm-ticket-strip) {
  filter:
    drop-shadow(0 24px 64px rgba(10, 14, 39, .35))
    drop-shadow(0 6px 16px rgba(10, 14, 39, .25));
}
.bm-ticket-strip .bm-sub-h2 { color: #fff; }
.bm-ticket-strip .bm-sub-lead { color: var(--bm-text-on-dark-muted); margin-inline: auto; }

/* Store badges on the About closing ticket. Renamed from .bm-store-badges to
   the .bm-closing block (2026-07-26): the markup now comes from
   components/StoreBadges, which derives its classes as {block}__stores /
   {block}__store, so the badges obey the APP_IS_LIVE launch switch like every
   other surface. Each badge is a <span> before launch and an <a> after, hence
   the display on the element rather than on the img alone. */
.bm-closing__stores { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.bm-closing__store { display: inline-flex; }
.bm-closing__store img { height: 48px; width: auto; }

/* =====================  Crew badges (careers)  ==================== */

.bm-badge-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
  align-items: start;
}
.bm-crew-badge {
  --c: var(--bm-stamp-indigo);
  --tint: #EEF0FF;
  background: #fff;
  border: 1px solid var(--bm-border);
  border-radius: 14px;
  box-shadow: var(--bm-shadow-md);
  padding: 1.5rem 1.4rem 1.4rem;
  text-align: center;
  position: relative;
  rotate: var(--r, 0deg);
  transition: translate .35s var(--bm-ease-out), rotate .35s var(--bm-ease-out), box-shadow .35s var(--bm-ease-out);
}
.bm-crew-badge:hover { translate: 0 -6px; rotate: 0deg; box-shadow: var(--bm-shadow-print); }
.bm-crew-badge::before {           /* lanyard slot */
  content: ""; position: absolute; top: 12px; left: 50%; translate: -50% 0;
  width: 44px; height: 9px; border-radius: var(--bm-radius-full);
  background: var(--bm-bg-alt); border: 1px solid var(--bm-border);
}
.bm-crew-badge__art {
  margin: 1.4rem auto 1.1rem;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--tint); color: var(--c);
  display: grid; place-content: center;
}
.bm-crew-badge__code {
  font-family: var(--bm-font-print); font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; color: var(--c); text-transform: uppercase;
  display: block; margin-bottom: .4rem;
}
.bm-crew-badge h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.bm-crew-badge p { font-size: .92rem; color: var(--bm-text-muted); margin-top: .35rem; }

/* =====================  Counter cards (contact trio)  ============= */

/* Explicit 3 columns (was auto-fit(260px), which fit 4 across at desktop
   and stranded the last 2 of 6 cards as a short, left-hung row — same
   dimensions front-to-back was impossible when card count didn't divide
   evenly into the row). 3 cols x 2 rows always divides evenly. */
.bm-counter-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .bm-counter-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .bm-counter-row { grid-template-columns: 1fr; } }
.bm-counter {
  background: #fff; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-md);
  box-shadow: var(--bm-shadow-md); padding: 2rem;
  /* Cards vary in heading length (1-3 lines) and in whether they carry a
     second meta line (Privacy's policy link) — column layout + a floor
     height + margin-top: auto on the first action element keeps every
     card the same box regardless, with its link/chip pinned to the same
     bottom edge instead of trailing right under a shorter heading. */
  display: flex; flex-direction: column; min-height: 15rem;
}
.bm-counter__tag { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.bm-counter__tag .bm-print-label { color: var(--c, var(--bm-stamp-red)); }
.bm-counter__no { font-family: var(--bm-font-print); font-size: .68rem; color: var(--bm-text-muted); }
.bm-counter h3 { font-size: 1.32rem; font-weight: 700; line-height: 1.3; }
.bm-counter p { font-size: 1rem; color: var(--bm-text-muted); margin-top: .3rem; }
.bm-counter__meta { font-size: .85rem; color: var(--bm-text-muted); margin-top: .6rem; }
.bm-counter .bm-mono-chip { margin-top: auto; }
/* A print-label used as a standalone kicker (not inside .bm-counter__tag,
   e.g. Press's "coming soon" card) needs its own gap before the heading —
   .bm-counter__tag already handles its own via margin-bottom. */
.bm-counter > .bm-print-label { display: block; margin-bottom: .6rem; }

.bm-mono-chip {
  display: inline-block; margin-top: .9rem;
  font-family: var(--bm-font-print); font-size: .85rem; font-weight: 700;
  color: #C42B44; background: var(--bm-primary-soft);
  border-radius: var(--bm-radius-sm); padding: .4em .7em;
}

/* =====================  Sections & rhythm  ======================== */

.bm-sub-section { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.bm-sub-section--tint { background: var(--bm-bg-alt); }
.bm-sub-section--tight { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }

.bm-sub-split {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
}

/* Manifesto */
.bm-manifesto p {
  font-size: clamp(1.5rem, 2.6vw + .4rem, 2.4rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.25;
  color: var(--bm-dark); max-width: 26ch; text-wrap: balance;
}
.bm-manifesto p + p { margin-top: 1.2rem; }

/* Letterhead document card (mockup: .doc-card — renamed to avoid
   colliding with .bm-doc in doc-pages.css) */
.bm-letterhead {
  background: #fff; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-md);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  position: relative; overflow: hidden;
}
.bm-letterhead__head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-bottom: 1.2rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--bm-border);
}
.bm-letterhead__head img { height: 18px; width: auto; }
.bm-letterhead__no { font-family: var(--bm-font-print); font-size: .66rem; letter-spacing: .16em; color: var(--bm-text-muted); text-transform: uppercase; }
.bm-letterhead__title { font-size: clamp(1.3rem, 1.6vw + .6rem, 1.7rem); font-weight: 800; letter-spacing: -.01em; }
.bm-letterhead__body { color: var(--bm-text-muted); margin-top: .8rem; max-width: 58ch; }
/* Corner stamp — --r sets rotation so it participates in the RTL flip below */
.bm-letterhead .bm-stamp { --r: -8deg; position: absolute; inset-inline-end: clamp(1rem, 4vw, 2.5rem); bottom: 1.4rem; opacity: .92; }

/* =====================  Page-local sections (about.html)  ========= */

.bm-sub-hero {
  --bm-sub-hero-tint-a: rgba(232, 65, 90, .07);
  --bm-sub-hero-tint-b: rgba(67, 56, 202, .05);
  padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(2.5rem, 4.5vw, 3.75rem);
  position: relative;
}
.bm-sub-hero::before {  /* faint world tint behind the pile, keeps canvas light */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 84% 18%, var(--bm-sub-hero-tint-a), transparent 65%),
    radial-gradient(36rem 26rem at 70% 90%, var(--bm-sub-hero-tint-b), transparent 60%);
}
.bm-sub-hero .bm-sub-lead { margin-top: 1.6rem; }
.bm-sub-hero .bm-stamp { margin-bottom: 1.8rem; }

/* Stat stamps band */
.bm-stamps-band { position: relative; }
.bm-stamps-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
  position: relative;
}
/* Child-combinator + class beats ".bm-stamps-row > *" on specificity
   regardless of source order — without this, the two rules tie at
   equal specificity and whichever comes LAST in the file wins, which
   previously flipped this element to position:relative. That turned
   the decorative route into a real flex item (auto-sized to its
   viewBox, ~193px tall) instead of an absolutely-positioned overlay,
   wrapping the row onto its own line and pushing the stamp rings ~240px
   down — the empty gap + visible squiggle reported 2026-07-14. */
.bm-stamps-row > .bm-stamps-row__route {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.bm-stamps-row > * { position: relative; z-index: 1; background: transparent; }
/* Stamps must sit opaque on top of the route line — with the
   transparent background above, the dashed path showed through the
   ring and struck across the caption text at the bottom of the 90-CITIES
   circle (reported 2026-07-14, red-pen annotation). Child-combinator +
   class beats ">* { background: transparent }" on specificity. */
.bm-stamps-row > .bm-stamp-ring {
  background:
    radial-gradient(circle at 62% 34%, rgba(255,255,255,.5) 0 10%, transparent 11%),
    var(--bm-bg-alt);
}
.bm-stamps-head { text-align: center; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.bm-stamps-head .bm-sub-lead { margin: .8rem auto 0; }

/* Manifesto + step-through */
.bm-mani-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
/* Grid, not flex: two prints + labeled arrow exceed the 5fr column's width
   at desktop, and flex-shrink was crushing the prints to ~90px. With
   1fr/auto/1fr each print fills its own track (capped at 220px). */
.bm-step-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: clamp(.8rem, 1.6vw, 1.4rem);
}
.bm-step-pair .bm-print { width: min(100%, 220px); justify-self: end; }
.bm-step-pair .bm-print:last-child { justify-self: start; }
.bm-step-pair .bm-print:first-child { --r: -4deg; }
.bm-step-pair .bm-print:last-child { --r: 3deg; }
.bm-step-pair__arrow {
  font-family: var(--bm-font-print); font-weight: 700; font-size: .7rem;
  letter-spacing: .14em; color: #C42B44; text-transform: uppercase;
  display: grid; justify-items: center; gap: .2rem; flex-shrink: 0;
}
.bm-step-pair__arrow svg { display: block; }

/* Studio doc */
.bm-studio-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bm-studio-side { justify-self: center; }
.bm-studio-side .bm-print { width: min(320px, 80%); --r: 3deg; --print-ratio: 4 / 5; }

/* Real app-UI phones (Community "Inside the app.") — distinct from
   .bm-print on purpose: prints are AI Forge *scenes* (aspirational),
   phones are actual product screens (proof). The PNGs already bake in
   the bezel/notch (see components/home/Economy.tsx comment), so this is
   just placement + a drop-shadow, no CSS frame chrome. */
.bm-phone-duo {
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 3 / 4;
  margin-inline: auto;
}
/* .bm-phone-duo__a/__b are the <img> elements themselves (no wrapper,
   unlike .bm-pile__a/b/c which wrap a <figure>) — sizing lives directly
   on these classes so a stray `.bm-phone-duo img` rule can't out-specificity
   the 58% width with an unwanted 100%. */
.bm-phone-duo__a, .bm-phone-duo__b {
  position: absolute;
  width: 58%;
  display: block;
  border-radius: 9%;
  filter: drop-shadow(0 20px 34px rgba(26, 26, 46, .22));
}
.bm-phone-duo__a { left: 2%; top: 0; rotate: -6deg; z-index: 2; }
.bm-phone-duo__b { right: 0; bottom: 0; rotate: 5deg; z-index: 1; }

.bm-closing { display: grid; gap: 1.6rem; justify-items: center; }

.bm-contact-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }

/* =====================  Page-local sections (careers.html)  ======= */

/* Hero pass — the shared .bm-pass is proportioned for the wide closing-CTA
   strip (~1130px, a ticket-like 3:1). Dropped into the split hero's 5fr
   column it only got ~443px against ~333px of content: a 1.36 near-square
   blob, with "BeMatrx Labs" wrapping under BMX, "When it can't wait"
   wrapping inside a 123px field, and the 3 fields collapsing to 2 columns
   so BOARDING was orphaned on its own row. It read as squeezed because it
   WAS — reported 2026-07-15. Fixed at both ends: give the column real
   width (below), and lay the fields out as one row so the card lands near
   a real boarding-pass 2:1. */
/* These two are (0,2,0) and so outrank the generic 960px .bm-sub-split
   stack rule (0,1,0) — media queries add no specificity — so they must
   between them cover every width, or the hero would stay two-up on
   phones. They do: the pair splits the whole range at 1100.
   Careers stacks earlier than the shared 960 because this hero's right
   column carries the pass, and below this a half column is narrower than
   the card needs; stacked, it gets its full 560.
   1180 is derived, not taste: it is the viewport at which half the
   container first reaches ~540, so the card is never *worse* two-up than
   it was stacked. Splitting any earlier put a dip in the middle of the
   range (at 1101 the card fell 560 -> 496 and dropped back to 2 field
   columns as the window got *wider*). */
@media (max-width: 1179px) {
  .bm-sub-split:has(.bm-hero-pass) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1180px) {
  .bm-sub-split:has(.bm-hero-pass) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}
/* Container, not viewport: the card's width does not track the viewport
   (it is ~540 two-up at desktop but a full 560 once the hero stacks), so
   the field layout below keys off the card's own inline size. */
/* max-width/justify-self moved to .bm-hero-pass-wrap — the wrapper is now
   the grid item of the split. --stub-w 108px is not a new constraint: the
   stub measured exactly 108px in all 12 locales already, because its label
   ("No. 001") is hardcoded rather than translated. */
.bm-hero-pass {
  width: 100%; rotate: 1.5deg;
  container-type: inline-size;
  --stub-w: 108px;
}
.bm-hero-pass .bm-pass__main { padding: 2rem; gap: 1.15rem; }
.bm-hero-pass .bm-pass__code { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.bm-hero-pass .bm-pass__stub { min-width: 96px; padding-inline: clamp(.7rem, 1.4vw, 1rem); }
.bm-hero-pass .bm-barcode { width: 68px; height: 42px; }
/* Brand kicker at the shared size/tracking wrapped mid-phrase here
   ("BeMatrx Labs · Crew / Pass"). Tightened so it sits on one line.
   Deliberately NOT nowrap: pt's brand is 34 chars ("...Passe de
   Tripulação") and pinning it wide shoved the STANDBY status clean out
   of the card's padding box. It may take two lines in a long locale;
   the head is space-between and absorbs that fine. */
.bm-hero-pass .bm-pass__brand { font-size: .68rem; letter-spacing: .12em; }
.bm-hero-pass .bm-pass__head { gap: .6rem; }
/* The route sublabels used to stack ("BEMATRX / LABS") only because the
   column was ~443px; at the width set above they sit on one line on their
   own. Pinning them with nowrap actively broke tr: "Senin hayatın" (13
   chars vs en's 9) pushed the route's min-content past the track, and
   since grid items floor at min-content that widened main's column and
   shoved the STANDBY chip out of the card. Left free to wrap. */
/* GATE / SEAT / BOARDING as one row — this is what buys the pass its
   proportion. auto-fit could not hold 3 tracks at this width and silently
   dropped to 2, orphaning BOARDING onto its own row.
   Tracks are weighted, not equal: the three values are wildly unequal
   ("Soon" needs 31px, "When it can't wait" 137px), so equal 1fr tracks
   starved BOARDING by 25px while GATE wasted 81px.
   No white-space:nowrap here on purpose — de/pt/fr boarding values run
   30-34 chars (~2x English), so nowrap would turn a long locale into an
   overflow that collides with the perforation. Wrapping to a second line
   is the correct failure mode: the card just grows a little. */
.bm-hero-pass .bm-pass__grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 1.25rem;
}
.bm-hero-pass .bm-pass__field span { font-size: .82rem; }
.bm-hero-pass .bm-pass__field small { font-size: .54rem; letter-spacing: .14em; }
/* Narrower than this and 3 tracks leave BOARDING too little to hold its
   value, so it takes its own full-width row rather than crushing. */
@container (max-width: 530px) {
  .bm-hero-pass .bm-pass__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-hero-pass .bm-pass__field:last-child { grid-column: 1 / -1; }
}

.bm-scene-row {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(1rem, 2.6vw, 2.4rem); flex-wrap: wrap;
}
.bm-scene-row .bm-print { width: min(240px, 42%); }
.bm-scene-row .bm-print:nth-child(1) { --r: -4deg; }
.bm-scene-row .bm-print:nth-child(2) { --r: 2deg; translate: 0 18px; }
.bm-scene-row .bm-print:nth-child(3) { --r: -1deg; }
.bm-scene-row .bm-print:nth-child(4) { --r: 4deg; translate: 0 22px; }

.bm-apply-wrap { max-width: 760px; margin-inline: auto; }
.bm-apply-note { text-align: center; margin-bottom: 2rem; }
.bm-apply-note .bm-sub-lead { margin: .8rem auto 0; }
.bm-apply-wrap .bm-mono-chip { font-size: 1rem; }

.bm-badges-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.2rem; }

/* =====================  Motion  =================================== */

@keyframes bm-print-drop {
  from { opacity: 0; translate: 0 26px; rotate: 0deg; }
}
/* bm-stamp-press keyframe + .bm-anim-stamp moved to style.css — 2026-07-13.
   .bm-anim-stamp is still used on this page (sub-page hero stamps); its
   reduced-motion coverage now comes from style.css's sitewide
   `*, *::before, *::after { ... !important }` reduced-motion rule. */
/* 900ms hero-only load motion per DESIGN.md §8 — kept as a literal (not
   --bm-dur-hero, which is already 1200ms and drives the homepage hero;
   redefining it would change unrelated homepage timing). */
.bm-anim-print { animation: bm-print-drop 900ms var(--bm-ease-out) both; }
.bm-anim-print:nth-child(2) { animation-delay: .12s; }
.bm-anim-print:nth-child(3) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .bm-anim-print, .bm-crew-badge {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}

/* =====================  RTL  ======================================= */
/* Stamp rotations and print fans are decorative — mirror them so the
   "ink" reads consistently regardless of reading direction. Everything
   else (pass stub border, flex-based pass route, grid split order) is
   already handled by logical properties / flex + grid direction-awareness
   above and needs no override here. */
/* .bm-stamp RTL flip moved to style.css alongside the rest of the
   component — 2026-07-13. */
[dir="rtl"] .bm-print      { rotate: calc(var(--r, 0deg) * -1); }
[dir="rtl"] .bm-stamp-ring { rotate: calc(var(--r, -4deg) * -1); }
[dir="rtl"] .bm-stamp-rect { rotate: calc(var(--r, 3deg) * -1); }
[dir="rtl"] .bm-crew-badge { rotate: calc(var(--r, 0deg) * -1); }
[dir="rtl"] .bm-phone-duo__a { rotate: 6deg; }
[dir="rtl"] .bm-phone-duo__b { rotate: -5deg; }

/* =====================  Responsive  =============================== */

@media (max-width: 960px) {
  .bm-sub-split,
  .bm-mani-grid,
  .bm-studio-grid { grid-template-columns: 1fr; }
  .bm-pile { max-width: 440px; }
  /* Stacked: the stub drops below and the tear line turns horizontal, so
     the notches move to the left/right edges at that line. The row is a
     fixed --stub-h for the same reason the column is a fixed --stub-w —
     the mask needs the line's offset as a length. Measured first: the
     stacked stub is 98-109px tall and, unlike the desktop one, identical
     in all 12 locales (label and barcode sit side by side, so the 54px
     barcode sets the height, not the text), so pinning it costs nothing. */
  .bm-pass {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--stub-h);
    -webkit-mask-image:
      radial-gradient(circle var(--notch-r) at 0 calc(100% - var(--stub-h)), transparent 0 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
      radial-gradient(circle var(--notch-r) at 100% calc(100% - var(--stub-h)), transparent 0 var(--notch-r), #000 calc(var(--notch-r) + .5px));
    mask-image:
      radial-gradient(circle var(--notch-r) at 0 calc(100% - var(--stub-h)), transparent 0 var(--notch-r), #000 calc(var(--notch-r) + .5px)),
      radial-gradient(circle var(--notch-r) at 100% calc(100% - var(--stub-h)), transparent 0 var(--notch-r), #000 calc(var(--notch-r) + .5px));
  }
  .bm-pass__stub {
    border-inline-start: 0;
    border-top: 2px dashed rgba(255, 255, 255, .35);
    grid-auto-flow: column;
  }
}

/* ===== C: page-specific additions =====
 * Added for app/[lang]/[slug]/page.tsx (React server component sub-pages)
 * and for DESIGN.md §5 blueprint elements (press / community / contact)
 * that have no mockup and therefore no class above. Same conventions as
 * the rest of this file: light canvas, AA-contrast text, logical
 * properties, reduced-motion safe (covered by the global rule above).
 */

/* Sub-page shell — background + breathing room below the fixed header,
   matching the sibling .bm-doc-page shell's padding token. */
.bm-sub-page {
  background: var(--bm-bg);
  /* no top padding: each page's hero owns its own breathing room
     (was var(--bm-doc-padding-y), which doubled up with the hero) */
}

/* Crew badge icon — Phosphor glyph sized to fill the 74px art disc
   (mockup used a 30px inline SVG; the shipped .bm-crew-badge__art rule
   above only sizes the disc itself, not a font-icon glyph inside it). */
.bm-crew-badge__art i { font-size: 1.9rem; line-height: 1; }

/* Press fact sheet — two-column definition list inside .bm-letterhead. */
.bm-facts-list { display: grid; gap: 0; margin-top: .4rem; }
.bm-facts-row {
  display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.4fr);
  gap: 1rem; padding-block: .7rem; border-block-end: 1px solid var(--bm-border);
}
.bm-facts-row:last-child { border-block-end: 0; }
.bm-facts-row dt { font-size: .85rem; color: var(--bm-text-muted); font-weight: 600; margin: 0; }
.bm-facts-row dd {
  font-family: var(--bm-font-print); font-size: .92rem; font-weight: 700;
  color: var(--bm-dark); margin: 0;
}
.bm-facts-row dd a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Press "quick quotes" — poster card (large quote, mono attribution). */
.bm-quote-poster blockquote { margin: 0; }
.bm-quote-poster {
  background: #fff; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-md); padding: clamp(1.8rem, 4vw, 3rem);
  margin-top: 1.6rem; max-width: 62ch;
}
.bm-quote-poster__text {
  font-size: clamp(1.3rem, 1.8vw + .6rem, 1.8rem); font-weight: 700;
  letter-spacing: -.01em; line-height: 1.35; color: var(--bm-dark); text-wrap: pretty;
}
.bm-quote-poster__attr {
  margin-top: 1.2rem; font-family: var(--bm-font-print); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bm-text-muted);
}

/* Community hero — mini print collage, smaller than About's .bm-pile.
   Positions kept physical per DESIGN.md §8 pile-print exception; RTL
   mirroring is already handled by the [dir="rtl"] .bm-print rule above
   (rotate: calc(var(--r) * -1)), since these are .bm-print elements. */
.bm-mini-pile {
  position: relative; width: min(380px, 100%); aspect-ratio: 10 / 9;
  justify-self: center;
}
.bm-mini-pile__a { --w: 46%; --r: -5deg; left: 2%; top: 4%; z-index: 2; }
.bm-mini-pile__b { --w: 42%; --r: 4deg; right: 0; top: 14%; z-index: 1; }
.bm-mini-pile__c { --w: 44%; --r: -2deg; left: 20%; bottom: 0; z-index: 3; }

/* Community social channels — ticket-stub buttons with visible @handles
   (not bare icon dots). */
.bm-social-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
}
.bm-social-stub {
  display: flex; align-items: center; gap: .9rem;
  background: #fff; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-md);
  box-shadow: var(--bm-shadow-md); padding: 1.1rem 1.3rem;
  color: var(--bm-dark); position: relative; overflow: hidden;
  transition: translate var(--bm-dur-base) var(--bm-ease-out), box-shadow var(--bm-dur-base) var(--bm-ease-out);
}
.bm-social-stub:hover { translate: 0 -3px; box-shadow: var(--bm-shadow-print); color: var(--bm-dark); }
/* Perforation notches — decorative, symmetric so no RTL mirroring is needed. */
.bm-social-stub::before, .bm-social-stub::after {
  content: ""; position: absolute; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; border-radius: 50%; background: var(--bm-bg-alt);
  border: 1px solid var(--bm-border);
}
.bm-social-stub::before { left: -8px; }
.bm-social-stub::after { right: -8px; }
.bm-social-stub__icon { flex-shrink: 0; display: grid; place-content: center; width: 32px; height: 32px; }
.bm-social-stub__text { display: grid; gap: .15rem; }
.bm-social-stub__name { font-weight: 700; font-size: .95rem; }
.bm-social-stub__handle {
  font-family: var(--bm-font-print); font-size: .74rem; letter-spacing: .06em;
  color: var(--bm-text-muted);
}

/* Contact — location strip (closing utility line, no ticket-strip on this
   page per DESIGN.md §5). */
.bm-contact-location {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .6rem 1.2rem; padding-block: 1.4rem; border-block-start: 1px solid var(--bm-border);
}
.bm-contact-location__name {
  font-family: var(--bm-font-print); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bm-dark);
}
.bm-contact-location__note { font-size: .9rem; color: var(--bm-text-muted); }

@media (max-width: 960px) {
  .bm-mini-pile { max-width: 320px; }
}

/* Press — hero manifesto at lead scale (blueprint: "kept manifesto lines as
   lead"); full-size .bm-manifesto stays for About's dedicated section. */
.bm-manifesto--compact p {
  font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--bm-text-muted);
  max-width: 52ch;
}
.bm-manifesto--compact p + p { margin-top: 0.5rem; }
.bm-manifesto--compact .bm-sub-accent { font-weight: 700; }

/* Single-card counter row (press media contact) — a lone counter stretching
   to full container width reads as an empty slab; cap it. */
.bm-counter--solo { max-width: 560px; }