/* ==========================================================================
   HIM: the homepage hero, the Cinematic Tri-Split (chosen by the founder)
   Three doors into the issue under a glass nav, then the issue marquee.
   Every colour here is a semantic role or a component token from tokens.css:
   text over a photo is --him-on-image in BOTH themes; the nav, the ground and
   the marquee follow the theme. Archived explorations: heroes-archive.css.
   Zero em dashes rule enforced.
   ========================================================================== */

/* ---------- The hero's own nav leads; the generic header row steps aside ----
   On the homepage ([data-home-hero]) and the archived previews the hero carries
   its own glass nav. The generic header stays in the DOM (its mobile menu is
   what the hero burger opens), but its row is hidden.                         */
body:has([data-home-hero], [data-hero-preview]) > .him-header {
  position: static;
  background: transparent;
  border-bottom: none;
}

body:has([data-home-hero], [data-hero-preview]) > .him-header > .him-header-inner {
  display: none;
}

/* The homepage nav is fixed, so the menu it opens is fixed under it too. */
body:has([data-home-hero], [data-hero-preview]) .him-mobile-nav {
  position: fixed;
  top: var(--him-nav-height);
  inset-inline: 0;
  z-index: var(--him-z-header);
  max-height: calc(100svh - var(--him-nav-height));
  overflow-y: auto;
  box-shadow: var(--shadow-overlay);
}

/* ---------- Shared hero nav (the archived previews reuse these) ------------ */
.him-hero-nav {
  position: relative;
  z-index: 20;
  width: 100%;
  color: var(--him-glass-content);
}

.him-hero-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--him-space-6);
  padding: 0 var(--him-gutter);
  height: var(--him-nav-height);
}

.him-hero-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--him-space-3);
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}

.him-hero-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.him-hero-nav-link {
  font-family: var(--him-font);
  font-size: var(--him-size-micro);
  font-weight: var(--him-weight-medium);
  letter-spacing: var(--him-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--him-glass-content-muted);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 6px;
  position: relative;
  transition: color var(--him-duration-base) var(--him-ease-out);
}

.him-hero-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: var(--him-border-hairline);
  background: currentColor;
  transition: width var(--him-duration-base) var(--him-ease-out);
}

.him-hero-nav-link:hover,
.him-hero-nav-link:focus-visible {
  color: var(--him-glass-content);
}

.him-hero-nav-link:hover::after,
.him-hero-nav-link:focus-visible::after {
  width: 100%;
}

.him-hero-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--him-space-3);
  flex-shrink: 0;
}

.him-hero-nav-subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--him-space-4);
  background: transparent;
  color: var(--him-glass-content);
  border: var(--him-border-hairline) solid var(--him-glass-content-muted);
  border-radius: 9999px;
  font-family: var(--him-font);
  font-size: var(--him-size-micro);
  font-weight: var(--him-weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background var(--him-duration-base) var(--him-ease-out),
              color var(--him-duration-base) var(--him-ease-out),
              border-color var(--him-duration-base) var(--him-ease-out);
}

.him-hero-nav-subscribe:hover,
.him-hero-nav-subscribe:focus-visible {
  background: var(--him-glass-content);
  color: var(--surface);
  border-color: var(--him-glass-content);
}

.him-hero-nav-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--him-glass-content-muted);
  cursor: pointer;
  transition: color var(--him-duration-base) var(--him-ease-out),
              background var(--him-duration-base) var(--him-ease-out);
}

.him-hero-nav-btn:hover,
.him-hero-nav-btn:focus-visible {
  color: var(--him-glass-content);
  background: var(--him-glass-hover-bg);
}

.him-hero-nav-btn svg {
  width: 16px;
  height: 16px;
}

.him-hero-nav .him-hero-nav-action {
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  background: transparent;
  border: none;
  color: var(--him-glass-content-muted);
  font-family: var(--him-font);
  font-size: var(--him-size-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--him-radius-md);
  transition: color var(--him-duration-base) var(--him-ease-out);
  white-space: nowrap;
}

.him-hero-nav .him-hero-nav-action:hover,
.him-hero-nav .him-hero-nav-action:focus-visible {
  color: var(--him-glass-content);
}

.him-hero-nav-action .him-action-icon {
  width: 15px;
  height: 15px;
}

.him-hero-burger {
  display: none;
}

@media (max-width: 1024px) {
  .him-hero-nav-links { display: none; }
  .him-hero-burger {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 28px;
    height: 36px;
  }
}

@media (max-width: 640px) {
  .him-hero-nav-inner {
    gap: var(--him-space-4);
    padding-inline: var(--him-space-4);
  }
  .him-hero-nav-actions {
    margin-left: auto;
    gap: 2px;
  }
  .him-hero-nav-subscribe {
    height: 28px;
    padding: 0 10px;
    margin-right: 4px;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
  }
  .him-hero-nav-btn,
  .him-hero-nav .him-hero-nav-action {
    padding: 0;
    width: 32px;
    height: 32px;
    min-height: 32px;
  }
  .him-hero-burger {
    width: 26px;
    height: 32px;
    margin-left: 2px;
    justify-content: flex-end;
  }
}

/* ---------- The tri-split glass nav ---------------------------------------
   Fixed. Over the hero it frosts the tops of the doors; scrolled, the glass
   thickens so the page underneath never fights the links.                   */
.him-hero-nav-trisplit {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--him-z-header);
  background: var(--him-glass-bg);
  -webkit-backdrop-filter: blur(var(--him-glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--him-glass-blur)) saturate(1.2);
  border-bottom: var(--him-border-hairline) solid var(--him-glass-border);
  transition: background var(--him-duration-base) var(--him-ease-out);
}

.him-hero-nav-trisplit[data-scrolled] {
  background: var(--him-glass-bg-strong);
}

.him-hero-nav-edition-tag {
  font-family: var(--him-font);
  font-size: var(--him-size-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--him-glass-content-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--him-space-2);
}

/* Gold carries the accent as a mark, not as small text on glass. */
.him-hero-nav-edition-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
}

.him-trisplit-nav-links .him-pill-num {
  color: var(--him-glass-content-muted);
  font-family: var(--him-font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

:root[data-theme="dark"] .him-trisplit-nav-links .him-pill-num {
  color: var(--him-glass-accent);
}

@media (max-width: 640px) {
  .him-hero-nav-edition-tag { display: none; }
}

/* ==========================================================================
   The Cinematic Tri-Split
   ========================================================================== */
.him-hero-trisplit {
  --him-marquee-h: 40px;
  position: relative;
  height: max(560px, calc(100svh - var(--him-marquee-h)));
  display: flex;
  overflow: hidden;
  background: var(--him-door-ground);
}

.him-trisplit-col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--him-nav-height) + var(--him-space-6)) var(--him-space-8) var(--him-space-8);
  overflow: hidden;
  text-decoration: none;
  color: var(--him-on-image);
  border-right: var(--him-door-gutter) solid var(--him-door-divider);
  transition: flex 0.65s var(--him-door-ease);
  cursor: pointer;
  isolation: isolate;
}

.him-trisplit-col:last-child {
  border-right: none;
}

/* The focus ring is drawn ABOVE the photo, scrim and text layers: an inset
   outline on the door itself is painted under its positioned children. */
.him-trisplit-col:focus-visible {
  outline: none;
}

.him-trisplit-col:focus-visible::after {
  content: '';
  position: absolute;
  inset: var(--him-space-2);
  z-index: 3;
  border: var(--him-border-emphasis) solid var(--him-on-image);
  pointer-events: none;
}

@media (min-width: 861px) {
  /* One state: the active door is wide. js/heroes.js makes the hovered door
     active; :hover is the no-JS fallback. */
  .him-hero-trisplit .him-trisplit-col:hover,
  .him-hero-trisplit .him-trisplit-col.active {
    flex-grow: 1.6;
  }
  /* The doors run under the fixed nav here, so the focus ring starts below it. */
  .him-trisplit-col:focus-visible::after {
    top: calc(var(--him-nav-height) + var(--him-space-2));
  }
  /* Narrow doors keep their headline and fold the paragraph away, so nothing
     wraps into a column of single words and every call to action shares one
     baseline. */
  .him-trisplit-desc {
    max-height: 8lh;
    transition: opacity 0.4s ease, max-height 0.65s var(--him-door-ease),
                margin 0.65s var(--him-door-ease);
  }
  .him-trisplit-col:not(.active) .him-trisplit-desc {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
  }
}

/* The photo layer bleeds 24px past the door so the cursor drift (js/motion.js)
   never shows an edge; the door clips it. */
.him-trisplit-bg {
  position: absolute;
  inset: -24px;
  z-index: 0;
}

.him-trisplit-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--him-door-image-filter);
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1),
              filter 0.5s ease;
  will-change: transform;
}

.him-trisplit-col:hover .him-trisplit-bg img,
.him-trisplit-col.active .him-trisplit-bg img {
  transform: scale(1.08);
  filter: var(--him-door-image-filter-active);
}

.him-trisplit-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--him-door-scrim);
  pointer-events: none;
}

.him-trisplit-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--him-space-3);
}

/* The door number is a small glass coin, so the photo above the words can stay
   clear in light mode without the number going grey on a white wall. */
.him-trisplit-num {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--him-space-2);
  border-radius: 9999px;
  font-family: var(--him-font-display);
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  color: var(--him-on-image);
  background: var(--him-on-image-chip-bg);
  border: var(--him-border-hairline) solid var(--him-on-image-chip-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.him-trisplit-badge {
  font-size: var(--him-size-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 9999px;
  color: var(--him-on-image);
  background: var(--him-on-image-chip-bg);
  border: var(--him-border-hairline) solid var(--him-on-image-chip-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.him-trisplit-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Small text on a photo stays paper; gold carries the accent as a rule. */
.him-trisplit-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--him-space-3);
  font-size: var(--him-size-eyebrow);
  font-weight: var(--him-weight-medium);
  letter-spacing: var(--him-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--him-on-image);
  text-shadow: var(--him-on-image-shadow);
  margin-bottom: var(--him-space-3);
}

.him-trisplit-kicker::before {
  content: '';
  width: var(--him-space-6);
  height: var(--him-border-emphasis);
  background: var(--him-on-image-accent);
}

.him-trisplit-headline {
  font-family: var(--him-font-display);
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1.08;
  font-weight: var(--him-weight-regular);
  letter-spacing: var(--him-tracking-display);
  color: var(--him-on-image);
  margin-bottom: var(--him-space-4);
  text-shadow: var(--him-on-image-shadow);
  max-width: 18ch;
  text-wrap: balance;
}

.him-trisplit-desc {
  font-size: var(--him-size-body);
  line-height: 1.6;
  color: var(--him-on-image-muted);
  margin-bottom: var(--him-space-6);
  max-width: 42ch;
  transition: opacity 0.4s ease;
}

.him-trisplit-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--him-space-3);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--him-weight-medium);
  color: var(--him-on-image);
}

.him-trisplit-cta svg {
  transition: transform var(--him-duration-base) var(--him-ease-out);
}

.him-trisplit-col:hover .him-trisplit-cta svg,
.him-trisplit-col:focus-visible .him-trisplit-cta svg {
  transform: translateX(6px);
}

/* ---------- Narrow screens: the doors stack ------------------------------
   Collapsed doors are an 84px strip with a flat scrim (headline only); the
   active door opens to half the screen with its paragraph and button.       */
@media (max-width: 860px) {
  .him-hero-trisplit {
    flex-direction: column;
    height: auto;
    padding-top: var(--him-nav-height);
  }

  .him-trisplit-col {
    width: 100%;
    flex: none;
    min-height: 84px;
    border-right: none;
    border-bottom: var(--him-door-gutter) solid var(--him-door-divider);
    padding: var(--him-space-4) var(--him-gutter);
    transition: min-height 0.45s var(--him-door-ease);
  }

  .him-trisplit-col:last-child {
    border-bottom: none;
  }

  .him-trisplit-col:not(.active) .him-trisplit-scrim {
    background: var(--him-door-scrim-collapsed);
  }

  .him-trisplit-col:not(.active) .him-trisplit-desc,
  .him-trisplit-col:not(.active) .him-trisplit-cta {
    display: none;
  }

  .him-trisplit-col:not(.active) .him-trisplit-headline {
    font-size: 1.15rem;
    margin-bottom: 0;
    line-height: 1.2;
    max-width: none;
  }

  .him-trisplit-col:not(.active) .him-trisplit-kicker {
    margin-bottom: 2px;
    font-size: 0.625rem;
  }

  .him-trisplit-col:not(.active) .him-trisplit-num {
    font-size: 1.1rem;
  }

  .him-trisplit-col.active {
    min-height: 50svh;
    padding: var(--him-space-6) var(--him-gutter);
  }

  .him-trisplit-col.active .him-trisplit-headline {
    font-size: clamp(1.5rem, 5.2vw, 2.25rem);
    margin-bottom: var(--him-space-3);
  }

  .him-trisplit-col.active .him-trisplit-desc {
    display: block;
    font-size: var(--him-text-sm);
    line-height: 1.55;
    margin-bottom: var(--him-space-5);
  }

  .him-trisplit-col.active .him-trisplit-cta {
    display: inline-flex;
    padding: 8px 16px;
    background: var(--him-on-image-chip-bg);
    border: var(--him-border-hairline) solid var(--him-on-image-chip-border);
    border-radius: 9999px;
    font-size: var(--him-text-xs);
  }
}

/* ---------- The issue marquee -------------------------------------------- */
.him-trisplit-marquee {
  position: relative;
  z-index: 5;
  height: var(--him-marquee-h, 40px);
  display: flex;
  align-items: center;
  background: var(--him-marquee-bg);
  border-top: var(--him-border-hairline) solid var(--him-marquee-border);
  border-bottom: var(--him-border-hairline) solid var(--him-marquee-border);
  overflow: hidden;
  white-space: nowrap;
}

.him-marquee-track {
  display: inline-flex;
  animation: him-marquee 28s linear infinite;
}

.him-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--him-space-4);
  padding-right: var(--him-space-8);
  font-size: var(--him-size-micro);
  letter-spacing: var(--him-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--him-marquee-fg);
}

.him-marquee-item .him-sep {
  color: var(--him-marquee-accent);
}

@keyframes him-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Motion hand-off (js/motion.js) --------------------------------
   Before the motion module runs, the words that will rise are held back so the
   first frame is the tween's first frame. Only with motion allowed, only with
   JS on, and app.js lifts it after 3s whatever happens. Once motion is ready,
   Flip owns the door resize, so the CSS transitions step aside.             */
@media (prefers-reduced-motion: no-preference) {
  .him-js:not(.him-motion-ready) .him-trisplit-headline,
  .him-js:not(.him-motion-ready) .him-trisplit-kicker,
  .him-js:not(.him-motion-ready) .him-trisplit-top,
  .him-js:not(.him-motion-ready) .him-trisplit-col.active .him-trisplit-desc,
  .him-js:not(.him-motion-ready) .him-trisplit-cta {
    visibility: hidden;
  }
}

.him-motion-ready .him-trisplit-col {
  transition: none;
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .him-marquee-track { animation: none; }
  .him-trisplit-bg img { transition: none; transform: none; }
}