/* ==========================================================================
   EPA · THE LOCKUP
   ONE COMPONENT, THREE PLACEMENTS: over the video on the auth screen, above
   the form on a phone, and at the centre of the page-transition curtain.
   There is deliberately no second copy — the curtain inherits the wording,
   the width matching and the divider from here.

       ELITE                    ← the larger line
       PARTNERS ASSOCIATION     ← the smaller line beneath, same width
       ─────────────────────    ← a rule that fades out at both ends

   ⚠ THE SITE HEADER IN src/ STILL READS "EPA / Destination Events" and has
   NOT been changed — the client asked for this wording on the auth screen
   only. The two lockups now differ. Flagged, not decided.

   THE WIDTH MATCH IS DONE BY MEASURING, in lockup.js — never by a
   letter-spacing typed in here, which is correct at exactly one font size and
   silently wrong at every other. What this stylesheet contributes is the two
   things that make the measurement mean something:

   1. BOTH LINES CANCEL THEIR OWN TRAILING LETTER-SPACE. `letter-spacing` adds
      its space after EVERY character including the last, so a tracked line's
      box is wider than its ink and anything "matched" to it sits visibly off.
   2. THE SUB-LINE DRIVES THE SIZE. The script fits the mark TO the sub, so
      resizing the whole lockup is one font-size change here.

   COLOUR IS INHERITED. Every rule below uses currentColor, so the same markup
   is cream over the video and ink on the cream panel with no variants.
   ========================================================================== */

/* ⚠ KIT DEFENCE, AND IT BELONGS HERE RATHER THAN IN THE CALLER.
   MEASURED against the hostile harness: a kit shipping
   `p, span { text-decoration: underline !important }` underlines the tagline,
   and this component is now used inside the THEME's document by the page
   transition curtain, where a kit really can reach it. The auth screen loads
   no theme CSS, so it was safe there — but a shared component that is only
   safe in one of its two homes is a trap for whoever uses it next.

   Appearance only. Nothing here touches margin, padding or display: that is
   the neutraliser trap from START-HERE §5, and this component's whole layout
   is measured, so a stray reset would break the width matching silently. */
.epa-lockup,
.epa-lockup * {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

.epa-lockup {
  /* The cap on the big line, read by lockup.js.
     ⚠ CLIENT INSTRUCTION, 2026-08-20: "Don't make the ELITE too big. You can
     make the PARTNERS ASSOCIATION smaller." So the script grows ELITE to meet
     the sub-line only until it reaches this; past it, ELITE stops and the
     SUB shrinks to meet ELITE instead. */
  --epa-lockup-max: 64px;
  /* The floor on the small line, so "make it smaller" can never make it
     unreadable. */
  --epa-lockup-sub-min: 8px;

  display: inline-block;
  text-align: start;
  color: inherit;
}

/* --- The masks ------------------------------------------------------------
   Each line sits in its own overflow:hidden box so it can RISE INTO PLACE
   from below rather than fading in. Exactly the construction the menu links
   use (.epa-menu__link is the mask, .epa-menu__lin is what moves — see
   src/04-header.css), and the button labels, so anything built on this
   component reads as the same site.

   ⚠ THE MASK IS PRINTED FOR BOTH CALLERS, BUT ONLY THE CURTAIN ARMS A START
   STATE INSIDE IT. A hidden start state that nothing is guaranteed to
   release is how a lockup ends up invisible for ever on a screen with no
   animation — the same rule the rest of the site follows with `html.epa-js`.
   The auth screen's lockup therefore sits at rest, fully visible, and the
   curtain's rules live in transition.css scoped to #epa-tr.

   line-height is deliberately above 1: at exactly 1 the em box is shorter
   than Times' ascender and the mask shaves the top off the capitals. */
.epa-lockup__mask {
  display: block;
  overflow: hidden;
}

.epa-lockup__e {
  display: block;
  font-family: "Times New Roman", Times, "Liberation Serif", Georgia, serif;
  /* A start value only. lockup.js replaces it with a measured px size. */
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem);
  font-weight: 400;
  line-height: 1.12;
  /* Stored in sentence case in the settings so a screen reader reads "Elite"
     as a word rather than spelling it; this is what makes it look like
     capitals. */
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  /* letter-spacing, inline-size and margin-inline-end are set by lockup.js. */
}

.epa-lockup__sub {
  --_ls: 0.28em;

  display: block;
  /* Trimmed from 0.55rem because the masks' line-height now carries part of
     the gap. Measured, not guessed: the optical gap is unchanged. */
  margin-block-start: 0.34rem;
  /* Cancels the trailing letter-space after the final character, so this
     line's box is exactly as wide as its ink — which is what the mark is then
     matched against. */
  margin-inline-end: calc(var(--_ls) * -1);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--_ls);
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  opacity: 0.86;
}

/* --- The divider ----------------------------------------------------------
   Solid through the middle, transparent at both ends. A BORDER CANNOT BE A
   GRADIENT, so this is a background-image sized to a single pixel row and
   pinned to the bottom — the same technique the menu rows use.

   The site token --epa-rule-fade is cream-on-dark and invisible on a light
   ground (beige is 1.32:1 on cream). This is the ink equivalent, in the same
   shape: transparent → colour at 20% → colour at 80% → transparent. It rides
   on currentColor, so it is ink on the cream panel and cream over the video
   without a second rule. */

/* ⚠ THE CURTAIN SUPPRESSES THE RULE — client instruction. A modifier on the
   shared component, so the auth screen (which was asked for it specifically)
   keeps it and there is still only one lockup in the codebase. */
.epa-lockup--norule .epa-lockup__rule { display: none; }

.epa-lockup__rule {
  display: block;
  margin-block-start: 0.85rem;
  block-size: 1px;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    currentColor 20%,
    currentColor 80%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: bottom;
  opacity: 0.34;
}

/* --- ONE-LINE VARIANT ------------------------------------------------------
   "'Elite Partners Association' should be on one line — use the Josefin Sans
   font for this" (client changes document), with the site map's strapline
   under it. This is the shape the page-transition curtain already uses, so
   the two marks on this site now agree instead of differing.

   ⚠ NO WIDTH MATCHING HERE, and lockup.js bails out on this class. The
   matching grows the mark until its ink equals the sub-line's; with a
   26-character mark over a 45-character strapline that would drive the mark
   DOWN to roughly a third of its size to make the short line as wide as the
   long one. Both lines are sized in CSS instead, and the tracking on the
   strapline is what brings the two widths close.

   font-size is a clamp rather than a measured px value for the same reason:
   there is nothing left to measure against. */
.epa-lockup--oneline {
  --epa-lockup-max: none;

  display: grid;
  justify-items: center;
  text-align: center;
}
/* ⚠ SERIF, NOT JOSEFIN SANS — client revision, 2026-09-08, overriding the
   changes document's "use the Josefin Sans font for this". The instruction
   now is to match the panel's own heading face, the one "Welcome back."
   is set in, so the two halves of the screen read as one design. Same stack
   as .epa-auth__title in auth.css; if that changes, change this with it. */
.epa-lockup--oneline .epa-lockup__e {
  font-family: "Times New Roman", Times, "Liberation Serif", Georgia, serif;
  /* Down twice. 1.05–1.9rem was written for a 50% column; 0.82–1.32rem still
     read as a headline rather than a signature at 40%. The mark is the
     quietest thing on this screen — the panel's own heading carries the
     page — so it sits below the panel's 1.5–2.05rem title, not beside it. */
  font-size: clamp(0.66rem, 0.42rem + 0.72vw, 0.98rem);
  font-weight: 300;
  letter-spacing: 0.16em;
  /* The tracking lands after the last letter too, which pushes the optical
     centre left. This puts it back. */
  text-indent: 0.16em;
  line-height: 1.2;
}
.epa-lockup--oneline .epa-lockup__sub {
  --_ls: 0.2em;

  margin-block-start: 0.75rem;
  /* NOT cancelled here. The negative end-margin exists to make the line's box
     exactly as wide as its ink so the mark can be matched to it. Nothing is
     being matched now, and on a centred grid that negative margin drags the
     line off centre by half of it. */
  margin-inline-end: 0;
  text-indent: var(--_ls);
  font-size: clamp(0.42rem, 0.35rem + 0.24vw, 0.53rem);
  opacity: 0.78;
}
/* --- The rule, drawn left to right, on a loop ------------------------------
   TWO BACKGROUNDS ON ONE ELEMENT. A faint base line so the rule is still a
   rule when nothing is moving, and a brighter segment that travels across
   it. Only `background-position` animates, which the compositor handles on
   its own thread — animating `width` here would lay out the lockup 60 times
   a second for a decoration.
   The travelling layer is listed FIRST because background layers paint
   front to back, so the bright segment has to sit above the base line. */
.epa-lockup--oneline .epa-lockup__rule {
  order: -1;
  inline-size: clamp(52px, 9vw, 74px);
  margin-block: 0 1rem;
  opacity: 0.62;
  background-image:
    linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%),
    linear-gradient(90deg, currentColor, currentColor);
  background-repeat: no-repeat, no-repeat;
  background-size: 60% 1px, 100% 1px;
  background-position: -60% 0, 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  .epa-lockup--oneline .epa-lockup__rule {
    animation: epa-lockup-rule-run 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }
}
@keyframes epa-lockup-rule-run {
  /* The pause is deliberate. A segment sweeping edge to edge with no rest
     reads as a loading bar; holding it off-frame for the last third makes it
     a flourish that happens every few seconds instead. */
  0%        { background-position: -60% 0, 0 0; }
  62%, 100% { background-position: 160% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .epa-lockup__e,
  .epa-lockup__sub { transition: none !important; }
}