/* ==========================================================================
   The Backhalf Sessions — /backhalf-sessions/
   Self-contained and loaded only by this page and nothing else on the site.

   A distinct event experience rather than a Perennus marketing page: near-black
   charcoal, with the flyer's own cobalt (#3756E6) as the primary accent and its
   yellow (#F2C545) for highlights. Those two values were sampled from the
   artwork so the page and the flyer cannot drift apart. Satoshi throughout,
   as the rest of the site uses.

   Every class is bh- prefixed: the page carries the site's own mark partial,
   and short names like .lnk, .flow and .who already mean something elsewhere.
   ========================================================================== */
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/Satoshi-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

body.bh {
  --f: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: var(--f);

  --ink: #0C0D12;          /* page */
  --ink-2: #13151D;        /* cards and surfaces */
  --ink-3: #1A1D27;        /* inputs, hover */
  --blue: #3756E6;         /* the flyer's cobalt */
  --blue-2: #4D6AF0;
  --blue-soft: rgba(55, 86, 230, 0.16);
  --yellow: #F2C545;       /* the flyer's highlight */
  --yellow-ink: #2A1F00;
  --green: #46D582;
  --red: #FA4937;

  --fg: #F4F5F8;
  --fg-2: #A9AEBE;
  --fg-3: #767C8F;
  --line: rgba(244, 245, 248, 0.11);
  --line-2: rgba(244, 245, 248, 0.22);

  --wrap: 1180px;
  --gut: clamp(20px, 4vw, 44px);
  --r: 20px;

  background: var(--ink);
  color: var(--fg);
  font-family: var(--f);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01", "ss03";
}

.bh ::selection { background: var(--yellow); color: var(--yellow-ink); }
.bh :focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.bh-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.bh-sec { padding-block: clamp(64px, 8vw, 112px); }
.bh-sec--tight { padding-block: clamp(40px, 5vw, 72px); }
.bh img { display: block; max-width: 100%; height: auto; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Type ---------- */
.bh-title { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.037em; text-wrap: balance; }
.bh-h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.bh-h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.028em; text-wrap: balance; }
.bh-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 16px; }
.bh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex: none; }
.bh-sub { margin-top: 16px; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.5; color: var(--fg-2); max-width: 46ch; text-wrap: pretty; }
.bh-sub--c { margin-inline: auto; }
.bh-head2 { max-width: 760px; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.bh-head2 .bh-kicker { justify-content: center; }
.bh-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--yellow); text-decoration: none; }
.bh-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bh-arw { width: 16px; height: 16px; flex: none; transition: transform 160ms ease; }
a:hover > .bh-arw, button:hover > .bh-arw { transform: translateX(2px); }

/* ---------- Buttons ---------- */
.bh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f); font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  padding: 13px 22px; border-radius: 999px;
  background: var(--blue); color: #fff;
  transition: background-color 130ms linear, transform 130ms ease, box-shadow 130ms linear;
}
.bh-btn:hover { background: var(--blue-2); }
.bh-btn:active { transform: translateY(1px); }
.bh-btn--lg { font-size: 1.0625rem; padding: 16px 28px; }
.bh-btn--sm { font-size: 0.875rem; padding: 9px 16px; }
.bh-btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
.bh-btn--ghost:hover { background: rgba(244,245,248,.07); }
.bh-btn--wa { background: var(--yellow); color: var(--yellow-ink); }
.bh-btn--wa:hover { background: #F7D370; }
.bh-btn[disabled] { opacity: .6; cursor: progress; }

/* ==========================================================================
   Header / footer
   ========================================================================== */
.bh-head { position: sticky; top: 0; z-index: 90; background: rgba(12,13,18,.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
.bh-head__in { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bh-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.025em; }
.bh-brand .mark { width: 20px; height: auto; }
.bh-brand svg { fill: currentColor; }

.bh-foot { border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 60px) 24px; }
.bh-foot__top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(20px,4vw,56px); align-items: start; }
.bh-foot__word { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.03em; }
.bh-foot__d { margin-top: 10px; max-width: 46ch; font-size: 0.9375rem; color: var(--fg-2); }
.bh-foot__meta { margin: 0; text-align: right; }
.bh-foot__meta dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); }
.bh-foot__meta dd { margin: 7px 0 0; font-size: 0.9375rem; color: var(--fg-2); }
.bh-foot__end { margin-top: clamp(28px,4vw,44px); padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 22px; font-size: 0.8125rem; color: var(--fg-3); }
.bh-foot a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line-2); }
.bh-foot a:hover { color: var(--fg); text-decoration-color: currentColor; }

/* ==========================================================================
   A. Hero
   ========================================================================== */
.bh-hero { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 80px); }
.bh-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.bh-hero__copy { min-width: 0; }

.bh-facts { list-style: none; margin: clamp(26px,3vw,36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.bh-facts li { background: var(--ink-2); padding: 14px 16px; display: grid; gap: 3px; }
.bh-facts span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.bh-facts b { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.bh-facts i { display: block; font-style: normal; font-size: 0.75rem; font-weight: 500; color: var(--fg-3); letter-spacing: 0; }

.bh-cta { margin-top: clamp(24px,3vw,32px); }
.bh-cta__note { margin-top: 12px; font-size: 0.875rem; color: var(--fg-3); max-width: 42ch; }

/* The flyer: shown whole, never cropped. */
.bh-flyer { margin: 0; }
.bh-flyer img { width: 100%; border-radius: 16px; box-shadow: 0 30px 60px -36px rgba(0,0,0,.9), 0 0 0 1px var(--line); }

/* ==========================================================================
   B. What you'll learn
   ========================================================================== */
.bh-learn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; counter-reset: none; }
.bh-learn li { background: var(--ink-2); border-radius: var(--r); padding: clamp(22px,2.6vw,30px); box-shadow: inset 0 0 0 1px var(--line); display: grid; align-content: start; gap: 10px; transition: box-shadow 150ms linear; }
.bh-learn li:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.bh-learn__n { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; color: var(--blue-2); }
.bh-learn__t { font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.bh-learn li p { color: var(--fg-2); font-size: 0.9375rem; }

/* ==========================================================================
   C. Registration
   ========================================================================== */
.bh-reg { background: linear-gradient(180deg, transparent, var(--blue-soft) 45%, transparent); }
.bh-card { max-width: 860px; margin-inline: auto; background: var(--ink-2); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -45px rgba(0,0,0,.9); padding: clamp(22px, 3.4vw, 42px); }

.bh-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px clamp(16px,2.4vw,26px); }
.bh-f { display: grid; gap: 7px; margin: 0; align-content: start; }
.bh-f--full { grid-column: 1 / -1; }
.bh-f label { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 7px; }
.bh-f label b { color: var(--yellow); }
.bh-f__opt { font-size: 0.8125rem; font-weight: 500; color: var(--fg-3); }
.bh-f__h { font-size: 0.8125rem; color: var(--fg-3); }
.bh-f input, .bh-f textarea, .bh-f select {
  width: 100%; font-family: var(--f); font-size: 1rem; color: var(--fg); background: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 11px; padding: 12px 14px;
  transition: border-color 120ms linear, box-shadow 120ms linear;
}
.bh-f textarea { resize: vertical; min-height: 86px; line-height: 1.5; }
.bh-f input::placeholder { color: var(--fg-3); }
.bh-f select option { background: var(--ink-3); color: var(--fg); }
.bh-f input:hover, .bh-f textarea:hover, .bh-f select:hover { border-color: rgba(244,245,248,.34); }
.bh-f input:focus, .bh-f textarea:focus, .bh-f select:focus { outline: none; border-color: var(--blue-2); box-shadow: 0 0 0 3px var(--blue-soft); }
/* A select that matches the inputs rather than the operating system. */
.bh-sel { position: relative; display: block; }
.bh-sel select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.bh-sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -6px; pointer-events: none; border-right: 2px solid var(--fg-2); border-bottom: 2px solid var(--fg-2); transform: rotate(45deg); }
.bh-f__e { font-size: 0.8125rem; font-weight: 500; color: #FF8E7E; }
.bh-f__e:empty { display: none; }
.bh-f.is-bad input, .bh-f.is-bad textarea, .bh-f.is-bad select { border-color: var(--red); }

.bh-consent { margin: clamp(22px,2.6vw,30px) 0 0; padding: clamp(18px,2.2vw,24px); border: 1px solid var(--line); border-radius: 14px; background: rgba(244,245,248,.03); }
/* A legend normally notches the fieldset border, but only for its first line:
   a second line falls below where the border starts and the border draws
   straight through it. Floating it takes it out of that mechanism, so the
   border closes cleanly around a heading that sits inside the panel. */
.bh-consent legend { float: left; width: 100%; padding: 0; margin-bottom: 16px; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.015em; }
.bh-consent .bh-cbox:first-of-type { clear: both; }
.bh-consent__opt { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
.bh-cbox { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; align-items: start; cursor: pointer; font-size: 0.9375rem; color: var(--fg-2); }
.bh-cbox + .bh-cbox { margin-top: 14px; }
.bh-cbox input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.bh-cbox__b { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); background: var(--ink-3); margin-top: 1px; position: relative; transition: background-color 120ms linear, border-color 120ms linear; }
.bh-cbox__b::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 6px; height: 11px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg) scale(.4); opacity: 0; transition: opacity 120ms linear, transform 120ms ease; }
.bh-cbox input:checked + .bh-cbox__b { background: var(--blue); border-color: var(--blue); }
.bh-cbox input:checked + .bh-cbox__b::after { opacity: 1; transform: rotate(45deg) scale(1); }
.bh-cbox input:focus-visible + .bh-cbox__b { outline: 2px solid var(--yellow); outline-offset: 3px; }
.bh-cbox:hover .bh-cbox__b { border-color: rgba(244,245,248,.4); }

/* Not a real field: off-screen for everyone, catnip for a bot. */
.bh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bh-submit { margin-top: clamp(22px,2.6vw,30px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.bh-status { font-size: 0.9375rem; font-weight: 500; color: var(--fg-2); }
.bh-status:empty { display: none; }
.bh-status.is-bad { color: #FF8E7E; }
.bh-note { margin-top: clamp(20px,2.4vw,26px); padding-top: clamp(18px,2vw,22px); border-top: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.6; color: var(--fg-3); }
.bh-note--warn { margin-top: 0; padding-top: 0; border-top: 0; font-size: 0.9375rem; color: #FF8E7E; }
.bh-note a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* The confirmation, in place of the form. */
.bh-done { text-align: center; padding: clamp(6px,2vw,18px) 0; }
.bh-done:focus { outline: none; }
.bh-done__tick { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(70,213,130,.15); color: var(--green); margin-bottom: 18px; }
.bh-done__tick svg { width: 32px; height: 32px; }
.bh-done__t { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); font-weight: 900; letter-spacing: -0.038em; }
.bh-done__s { margin-top: 10px; color: var(--fg-2); max-width: 44ch; margin-inline: auto; }
.bh-done__facts { margin: clamp(22px,3vw,30px) auto 0; padding: clamp(18px,2.2vw,22px); max-width: 540px; background: rgba(244,245,248,.04); border-radius: 14px; display: grid; gap: 14px; text-align: left; }
.bh-done__facts div { display: grid; gap: 3px; }
.bh-done__facts dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.bh-done__facts dd { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.bh-done__note { margin-top: 16px; font-size: 0.875rem; color: var(--fg-3); }
.bh-done__cal { margin-top: 18px; }

/* The community, shown only after a registration exists. */
.bh-wa { margin-top: clamp(28px,3.4vw,40px); padding-top: clamp(24px,3vw,32px); border-top: 1px solid var(--line); }
.bh-wa__t { font-size: clamp(1.1rem,1rem + 0.5vw,1.35rem); font-weight: 900; letter-spacing: -0.028em; }
.bh-wa__s { margin: 10px auto 18px; max-width: 52ch; font-size: 0.9375rem; color: var(--fg-2); }
.bh-wa__note { margin-top: 14px; font-size: 0.8125rem; color: var(--fg-3); max-width: 52ch; margin-inline: auto; }
.bh-wa__pending { font-size: 0.9375rem; color: var(--yellow); }

/* ==========================================================================
   D. Host and guest
   ========================================================================== */
.bh-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.bh-person { background: var(--ink-2); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(18px,2.2vw,24px); display: grid; grid-template-columns: 132px minmax(0,1fr); gap: clamp(16px,2vw,24px); align-items: start; }
.bh-person__img { width: 132px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: 14px; background: var(--ink-3); }
.bh-person__role { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.bh-person__n { margin-top: 6px; font-size: clamp(1.15rem,1.05rem + 0.5vw,1.4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; }
.bh-person__t { margin-top: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--blue-2); line-height: 1.4; }
.bh-person__b { margin-top: 12px; font-size: 0.9375rem; color: var(--fg-2); }
.bh-person .bh-link { margin-top: 14px; font-size: 0.875rem; }

/* ==========================================================================
   E. The series
   ========================================================================== */
.bh-series { background: var(--ink-2); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(26px,3.4vw,44px); text-align: center; }
.bh-series .bh-kicker { justify-content: center; }
.bh-series .bh-h3 { max-width: 46ch; margin-inline: auto; }
.bh-series__s { margin: 14px auto clamp(22px,2.6vw,28px); max-width: 52ch; color: var(--fg-2); font-size: 0.9375rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .bh-hero__in { grid-template-columns: minmax(0,1fr); gap: 32px; }
  /* Flyer first on narrow screens: it establishes the event instantly. */
  .bh-flyer { order: -1; max-width: 520px; margin-inline: auto; }
  .bh-people { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 859px) {
  .bh-learn { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 599px) {
  /* Comfortable thumb targets: the header action and the inline profile links
     are otherwise around 22-35px tall. */
  .bh-head .bh-btn--sm { padding: 12px 18px; }
  .bh-person .bh-link { padding-block: 10px; }
  .bh-foot__end a { display: inline-block; padding-block: 6px; }
  .bh-grid { grid-template-columns: minmax(0,1fr); }
  .bh-facts { grid-template-columns: minmax(0,1fr); }
  .bh-cta .bh-btn, .bh-submit .bh-btn, .bh-btn--wa { width: 100%; }
  .bh-person { grid-template-columns: minmax(0,1fr); justify-items: center; text-align: center; }
  .bh-person__img { width: 150px; }
  .bh-person .bh-link { justify-content: center; }
  .bh-foot__top { grid-template-columns: minmax(0,1fr); }
  .bh-foot__meta { text-align: left; }
}

/* Reveal: the site's shared observer adds .is-in; reduced motion is honoured. */
.js body.bh [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 420ms cubic-bezier(.2,.7,.1,1), transform 420ms cubic-bezier(.2,.7,.1,1); transition-delay: calc(var(--i, 0) * 60ms); }
.js body.bh [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { body.bh [data-reveal] { opacity: 1 !important; transform: none !important; } }