/* ===========================================================================
   THE HYBRID EXPERIENCE — member portal
   ---------------------------------------------------------------------------
   Sibling of assets/equipped/portal.css, deliberately NOT a copy of it.

   WHY THIS ONE IS DARK
   The EQuipped portal sits on cream (#F1EFE8). Macie's seven Hybrid cards are
   dark photographs with white serif set over them; on cream they read as holes
   punched in the page. On ironstone they glow. Approved 14 Sep 2026.

   This portal is SINGLE-THEME on purpose. It does not follow prefers-color-
   scheme, because "Hybrid is the dark one" is the design, not a preference.
   Every colour is therefore painted explicitly — nothing is left to inherit
   from Astra or from the member's OS.

   PALETTE drawn from the live /hybrid-experience/ page, not invented. The blues
   on that page are Astra factory defaults and are deliberately ignored.

   FONTS: Cormorant Garamond is loaded site-wide by the theme and is the face on
   her card artwork. Catamaran is already enqueued by mr-portals.php for the
   EQuipped portal. Neither costs a new request; neither can silently fall back.
   =========================================================================== */

.hx{
  --hx-ground:#211D1A;
  --hx-surface:#2A2522;
  --hx-sunk:#1A1715;
  --hx-ink:#F6EEE6;
  --hx-ink-2:#B5A08C;
  --hx-ink-3:#8B7F73;
  --hx-rule:#3A342E;
  --hx-rule-2:#4A423C;
  --hx-bronze:#C0AE89;
  --hx-bronze-deep:#8A6626;
  --hx-track:#3A342E;
  --hx-fill:#7A6B52;
  --hx-lock:#7C7166;

  background:var(--hx-ground);
  color:var(--hx-ink);
  font-family:'Catamaran',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* Full-bleed out of Astra's container, then re-contained to --hx-maxw.
     Both dimensions stay variables so the next adjustment is one number rather
     than a hunt through this file. Macie settled on these two on the live page
     with a temporary slider (?tune=1), because a preview panel always reads
     narrower than the real thing; that tool was removed 15 Sep 2026 once the
     numbers were chosen. Its one hazard was that it remembered your last drag
     in localStorage, so the portal could keep rendering at a stale size for
     whoever had used it. If it is ever rebuilt, fix that. */
  --hx-maxw:1080px;
  --hx-cardw:300px;
  margin:0 calc(50% - 50vw);
  padding:0 max(22px,calc(50vw - (var(--hx-maxw) / 2))) 90px;
}
.hx *{box-sizing:border-box}

/* ---------------------------------------------------------------------------
   ELEMENTOR'S GLOBAL KIT OWNS EVERY HEADING ON THIS SITE.

       .elementor-kit-8 h1 { font-family:'Sorts Mill Goudy'; color:#2E2A28 }

   That is specificity 0,1,1 - one class plus one element. A plain .hx__h1 is
   0,1,0 and loses, so the first render of this portal put near-black Goudy
   headings on an ironstone ground: "Welcome back, Macie." was almost invisible
   and the Cormorant Garamond never appeared at all. Body copy was fine, which
   is what made it look like a colour bug rather than a cascade one.

   The fix is specificity, not force. Adding the wrapper and the element name
   makes these 0,2,1 and they win cleanly - there is no !important anywhere in
   the chain, so introducing one here would only make the next override harder.
   The lightbox title sits OUTSIDE .hx, so it needs its own rule.
   --------------------------------------------------------------------------- */
.hx h1.hx__h1,
.hx h2.hx__paneh{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;color:var(--hx-ink)}
.hx p.hx__gatet{font-family:'Cormorant Garamond',Georgia,serif;color:var(--hx-bronze)}
.lxm h3.lxm__t{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;color:#F6EEE6}

/* --- masthead ----------------------------------------------------------- */
.hx__top{padding:44px 0 28px}
.hx__eyebrow{font-size:.64rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--hx-bronze);margin:0 0 .5rem}
.hx__h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(1.9rem,4vw,2.5rem);line-height:1.08;letter-spacing:-.005em;
  color:var(--hx-ink);margin:0 0 .3rem;text-wrap:balance}
.hx__tagline{color:var(--hx-ink-2);margin:0;font-size:.97rem}
/* NB: .hx__sub further down is the breakout-room <ul> and carries a background.
   The masthead line is .hx__tagline precisely so it cannot inherit that. */

/* --- the two columns ---------------------------------------------------- */
.hx__shell{display:grid;grid-template-columns:var(--hx-cardw) minmax(0,1fr);gap:26px;align-items:start}
.hx__rail{display:flex;flex-direction:column;gap:11px;position:sticky;top:22px}
.hx__raillabel{font-size:.63rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--hx-ink-3);margin:13px 0 1px}

/* --- the photo cards ---------------------------------------------------- */
.hx__card{position:relative;display:block;width:100%;padding:0;margin:0;
  border:1px solid var(--hx-rule);border-radius:2px;background:var(--hx-sunk);
  cursor:pointer;overflow:hidden;text-align:left;font:inherit;color:inherit;
  transition:border-color .18s}
.hx__card img{width:100%;height:auto;display:block;opacity:.82;
  transition:opacity .22s,transform .4s}
.hx__card:hover img{opacity:1;transform:scale(1.022)}
.hx__card:hover{border-color:var(--hx-rule-2)}
.hx__card[aria-pressed="true"]{border-color:var(--hx-bronze)}
.hx__card[aria-pressed="true"] img{opacity:1}
.hx__card:focus-visible{outline:2px solid var(--hx-bronze);outline-offset:2px}
/* The artwork, and nothing on top of it. */
.hx__cardart{position:relative;display:block}
.hx__cardbar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(246,238,230,.14)}
.hx__cardbar i{display:block;height:100%;width:0;background:var(--hx-bronze);transition:width .35s}
/* the tally lives under the picture, never over it */
.hx__cardmeta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:7px 2px 8px;font-size:.66rem;letter-spacing:.07em;color:var(--hx-ink-3);
  font-variant-numeric:tabular-nums}
.hx__cardcnt{white-space:nowrap}
.hx__card.is-complete .hx__cardcnt{color:var(--hx-bronze)}
.hx__card.is-locked img{opacity:.32;filter:grayscale(.6)}
.hx__lock{color:var(--hx-bronze);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.hx__lock[hidden]{display:none}

/* ---------------------------------------------------------------------------
   THE ASTRA BLUE, again. The theme paints  button:hover{background:#045CB4}.
   That selector is 0,1,1 and beats a single class, so every real <button> in
   here needs its own hover rule or it flashes blue. The cards were safe while
   their caption sat over the photograph; the moment a transparent area exists
   the blue paints straight through. See the same note in equipped/portal.css.
   --------------------------------------------------------------------------- */
.hx button.hx__card:hover,.hx button.hx__card:focus,.hx button.hx__card:active{background:var(--hx-sunk)}
.hx button.hx__subtoggle:hover,.hx button.hx__subtoggle:focus,.hx button.hx__subtoggle:active{background:transparent}
button.lxm__x:hover,button.lxm__x:focus,button.lxm__x:active{background:none}

/* --- the syllabus panel ------------------------------------------------- */
.hx__panes{min-width:0}
.hx__pane{background:var(--hx-surface);border:1px solid var(--hx-rule);border-radius:2px;
  padding:26px 28px 30px;min-height:480px}
.hx__pane[hidden]{display:none}
.hx__paneeyebrow{font-size:.64rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--hx-bronze);margin:0 0 .45rem}
.hx__paneh{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:1.85rem;
  line-height:1.1;color:var(--hx-ink);margin:0 0 .35rem}
.hx__lede{color:var(--hx-ink-2);margin:0 0 1.4rem;font-size:.93rem;max-width:58ch}
.hx__tally{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hx-ink-3);margin:0 0 1.4rem}
.hx__tally.is-all{color:var(--hx-bronze)}
.hx__tally:empty{display:none}

.hx__sched{display:flex;flex-wrap:wrap;gap:10px 26px;background:var(--hx-sunk);
  border:1px solid var(--hx-rule);padding:14px 17px;margin:0 0 1.5rem;font-size:.83rem}
.hx__sched div{display:flex;flex-direction:column;min-width:0}
.hx__sched .k{font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--hx-ink-3)}
.hx__sched .v{color:var(--hx-ink);font-variant-numeric:tabular-nums}
.hx__gatenote{color:var(--hx-ink-3);font-size:.84rem;margin:0 0 1.5rem;max-width:60ch}

.hx__gate{border:1px solid var(--hx-rule-2);background:var(--hx-sunk);padding:22px 24px;margin:0 0 1.5rem}
.hx__gate[hidden]{display:none}
.hx__gatet{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.32rem;color:var(--hx-bronze);margin:0 0 .35rem}
.hx__gateb{color:var(--hx-ink-2);font-size:.89rem;margin:0}

/* --- lesson rows -------------------------------------------------------- */
.hx .listC{list-style:none;margin:0;padding:0;border-top:1px solid var(--hx-rule)}
.hx .rowC{display:grid;grid-template-columns:1.8em minmax(0,1fr) auto;gap:2px 13px;
  align-items:baseline;padding:11px 2px 9px;border-bottom:1px solid var(--hx-rule);
  position:relative}
.hx .rowC.lx{cursor:pointer}
.hx .rowC.lx:hover .nameC{color:var(--hx-bronze)}
.hx .rowC.lx:focus-visible{outline:2px solid var(--hx-bronze);outline-offset:-2px}
.hx .numC{grid-column:1;font-size:.78rem;color:var(--hx-ink-3);font-variant-numeric:tabular-nums}
.hx .nameC{grid-column:2;min-width:0;color:var(--hx-ink);transition:color .15s}
.hx .durC{grid-column:3;font-size:.82rem;color:var(--hx-ink-2);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.hx__note{display:block;font-size:.74rem;color:var(--hx-ink-3);margin-top:1px}
.hx .rowC--noreplay .hx__note{color:var(--hx-bronze-deep)}
.hx .rowC--soon .nameC,.hx .rowC--soon .durC{color:var(--hx-ink-3)}
.hx .rowC.is-done .nameC{color:var(--hx-bronze)}

/* the completion tick, written in by portal.js */
.hx .pmark{font-size:.8rem;line-height:1;color:var(--hx-bronze);margin-left:.45em;
  opacity:0;white-space:nowrap}
.hx .rowC.is-done .pmark{opacity:1}
.hx .pmark__t{font-family:'Catamaran',Arial,sans-serif;font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hx-bronze-deep);margin-left:.35em;vertical-align:.08em}
.hx .presume{font-family:'Catamaran',Arial,sans-serif;font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hx-ink-3);margin-left:.5em}

/* --- the horse rides here ----------------------------------------------- */
.hx .pbar{grid-column:2/4;height:2px;background:var(--hx-track);border-radius:1px;
  margin-top:7px;position:relative;overflow:visible}
.hx .pbar__f{display:block;height:100%;width:0;background:var(--hx-fill);border-radius:1px;
  transition:width .3s}
.hx .rowC.is-done .pbar__f{background:var(--hx-bronze)}
.hx .rowC .pmk{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);display:block;
  line-height:0;color:var(--hx-bronze);pointer-events:none;opacity:0;transition:left .3s,opacity .3s}
.hx .rowC .pmk svg{display:block;width:22px;height:15.4px;overflow:visible}
.hx .rowC.is-riding .pmk{opacity:1}

/* --- breakout rooms: a dropdown, never an always-open list --------------- */
.hx__subtoggle{display:flex;align-items:center;gap:.42em;margin:-4px 0 0 calc(1.8em + 13px);
  background:transparent;border:0;padding:6px 0 10px;font:inherit;font-size:.73rem;
  letter-spacing:.04em;color:var(--hx-ink-3);cursor:pointer}
.hx__subtoggle:hover{color:var(--hx-bronze)}
.hx__subtoggle:focus-visible{outline:2px solid var(--hx-bronze);outline-offset:2px}
.hx__chev{display:inline-block;font-size:.6rem;transition:transform .22s}
.hx__subtoggle[aria-expanded="true"]{color:var(--hx-bronze)}
.hx__subtoggle[aria-expanded="true"] .hx__chev{transform:rotate(90deg)}
.hx__sub{list-style:none;margin:0 0 6px;padding:0;background:var(--hx-sunk)}
.hx__sub[hidden]{display:none}
.hx .rowC--sub{padding-left:0}
.hx .rowC--sub .numC{color:var(--hx-bronze-deep);font-size:.66rem;text-align:right}
.hx .rowC--sub .nameC{font-size:.88rem;color:var(--hx-ink-2)}
.hx .rowC--sub .durC{font-size:.79rem;color:var(--hx-ink-3)}
.hx .rowC--sub.is-done .nameC{color:var(--hx-bronze)}

/* --- the video lightbox (same shape as the EQuipped portal's) ------------ */
.lxm{position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  background:rgba(18,13,10,.88);padding:24px}
.lxm[open]{display:grid}
.lxm__box{width:min(1000px,100%);background:#120D0A;border-radius:4px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lxm__bar{display:flex;align-items:baseline;gap:14px;padding:14px 18px;
  border-bottom:1px solid rgba(246,238,230,.14)}
.lxm__t{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.08rem;color:#F6EEE6;
  margin:0;flex:1;line-height:1.3;font-weight:400}
.lxm__d{font-family:'Catamaran',Arial,sans-serif;font-size:.68rem;letter-spacing:.08em;
  color:#B5A08C;font-variant-numeric:tabular-nums;white-space:nowrap}
.lxm__x{background:none;border:0;color:#B5A08C;font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0 2px}
.lxm__x:hover{color:#F6EEE6}
.lxm__f{position:relative;padding-top:56.25%;background:#000}
.lxm__f iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- narrower ------------------------------------------------------------
   Astra shrinks the root font by 8.8% below 921px, which is why every size in
   this file is px or rem-off-a-px-root rather than something that compounds.
   ------------------------------------------------------------------------- */
@media(max-width:980px){
  .hx__shell{grid-template-columns:1fr!important;gap:20px}
  .hx__rail{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
  .hx__raillabel{grid-column:1/-1;margin:8px 0 0}
  .hx__pane{padding:26px 22px 30px;min-height:0}
}
@media(max-width:560px){
  .hx{padding-left:18px;padding-right:18px}
  .hx__top{padding:34px 0 24px}
  .hx__rail{grid-template-columns:1fr}
  .hx__pane{padding:22px 16px 26px}
  .hx__paneh{font-size:1.72rem}
  .hx .rowC{grid-template-columns:1.6em minmax(0,1fr) auto}
  .lxm{padding:12px}
  .lxm__t{font-size:.92rem}
}
@media(prefers-reduced-motion:reduce){
  .hx *,.hx *::before,.hx *::after{transition:none!important;animation:none!important}
}


/* ===========================================================================
   LOCKED — what somebody who is not enrolled sees.
   ---------------------------------------------------------------------------
   The same rail, the same card artwork, the same syllabus, with the replays
   withheld. This is styling only: the withholding happens in portal-body.php,
   which never emits a video id in this state, so the padlock below is honest
   rather than decorative.
   =========================================================================== */
.hx__login{margin:0 0 38px;max-width:520px}
.hx__logincard{background:var(--hx-surface);border:1px solid var(--hx-rule);
  border-radius:2px;padding:26px 26px 22px}
/* Two classes, not one: .elementor-kit-8 h2 is (0,1,1) and beats a bare class. */
.hx h2.hx__loginh{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:1.62rem;line-height:1.15;color:var(--hx-ink);margin:0 0 .5rem}
.hx__loginp{color:var(--hx-ink-2);font-size:.9rem;line-height:1.55;margin:0 0 1.2rem;max-width:44ch}
.hx__loginnote{color:var(--hx-ink-3);font-size:.81rem;line-height:1.5;margin:13px 2px 0}

/* MemberPress's own login markup, dressed for the dark ground. */
.hx .mepr-form .mp-form-row{margin:0 0 15px}
.hx .mepr-form .mp-form-label{margin:0 0 5px}
.hx .mepr-form label{font-family:'Catamaran',system-ui,sans-serif;font-size:.63rem;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--hx-ink-3)}
.hx .mepr-form input[type="text"],
.hx .mepr-form input[type="password"]{width:100%;font:inherit;color:var(--hx-ink);
  background:var(--hx-sunk);border:1px solid var(--hx-rule-2);border-radius:2px;padding:11px 12px}
.hx .mepr-form input[type="text"]:focus,
.hx .mepr-form input[type="password"]:focus{outline:2px solid var(--hx-bronze);outline-offset:1px}
.hx .mepr-form .mp-hide-pw{position:relative;display:block}
/* Astra paints EVERY button blue on hover. The show-password eye is a button. */
.hx .mepr-form .mp-hide-pw button.button,
.hx .mepr-form .mp-hide-pw button.button:hover,
.hx .mepr-form .mp-hide-pw button.button:focus{position:absolute;right:2px;top:50%;
  transform:translateY(-50%);background:none;border:0;box-shadow:none;color:var(--hx-ink-3);cursor:pointer}
.hx .mepr-form #rememberme{margin-right:7px;accent-color:var(--hx-bronze)}
.hx .mepr-form label:has(#rememberme){text-transform:none;letter-spacing:.02em;
  font-size:.78rem;font-weight:400;color:var(--hx-ink-2)}
.hx .mepr-form input[type="submit"],
.hx .mepr-form input[type="submit"]:hover,
.hx .mepr-form input[type="submit"]:focus{width:100%;font-family:'Catamaran',system-ui,sans-serif;
  font-size:.7rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:#211D1A;background:var(--hx-bronze);border:0;border-radius:2px;padding:14px 18px;cursor:pointer}
.hx .mepr-form input[type="submit"]:hover{background:#D3C3A2}
.hx .mp-spacer{height:6px}
/* Gold #B7A378 fails contrast on this ground, so links use the light gold. */
.hx .mepr-login-actions{margin-top:14px}
.hx .mepr-login-actions a{color:#E8DCC4;font-size:.82rem;text-decoration:underline;
  text-underline-offset:3px}
.hx .mepr-login-actions a:hover{color:var(--hx-ink)}

/* A locked row: not playable, and wearing a padlock.
   The padlock hangs off the ROW, not off the duration, so that veiling the
   text below cannot blur it too - a filter on a parent takes its children
   with it and no amount of filter:none on the child undoes that. */
.hx .rowC--locked{cursor:default;position:relative;padding-right:20px}
.hx .rowC--locked .nameC{color:var(--hx-ink-2)}
.hx .rowC--locked .durC{color:var(--hx-ink-3)}
.hx .rowC--locked::after{content:"";position:absolute;right:0;top:50%;
  transform:translateY(-50%);width:10px;height:12px;background:var(--hx-lock);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2 5.2V3.6a3.5 3.5 0 0 1 7 0v1.6h1.1v7.6H-0.1V5.2H2zm1.5 0h4V3.6a2 2 0 1 0-4 0v1.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2 5.2V3.6a3.5 3.5 0 0 1 7 0v1.6h1.1v7.6H-0.1V5.2H2zm1.5 0h4V3.6a2 2 0 1 0-4 0v1.6z'/%3E%3C/svg%3E") center/contain no-repeat}

/* THE VEIL - past rounds only, chosen by Macie 15 Sep.
   Everything inside the list goes: numbers, titles, running times, the
   "no replay" notes and the breakout toggles. The pane's own heading and its
   summary line stay sharp, because those are the part that sells. Round 5 and
   Start Here are never veiled; see the note in portal-body.php. */
.hx .hx__pane--veiled .numC,
.hx .hx__pane--veiled .nameC,
.hx .hx__pane--veiled .durC,
.hx .hx__pane--veiled .hx__note,
.hx .hx__pane--veiled .hx__subtoggle{filter:blur(3.4px);user-select:none}
/* Nothing in a veiled pane is reachable by keyboard either - it would be a
   focus ring travelling over text nobody can read. */
.hx .hx__pane--veiled .hx__subtoggle{pointer-events:none}