/* ============================================================
   how.css -- "HOW IT WORKS" section - Find Me Some Damn Jobs
   Cinematic expedition editorial. Scope: #howRoot only.
   Every class prefixed `how-`. No JS. Fonts already loaded by
   the page: Fraunces (variable 300-700) + Fragment Mono.
   ============================================================ */

#howRoot {
  /* ---- tokens ---- */
  --how-ink: #f1ece2;
  --how-dim: #b9b2a4;
  --how-amber: #e8a13d;
  --how-navy: #0a0e18;
  --how-coal: #0c0f14;
  --how-tier-strong: #e8a13d;
  --how-tier-good: #9fd2a8;
  --how-tier-maybe: #8fb8d8;
  --how-tier-stretch: #b9a4c4;
  --how-hairline: rgba(241, 236, 226, 0.09);
  --how-serif: 'Fraunces', serif;
  --how-mono: 'Fragment Mono', monospace;
  --how-radius: 18px;

  /* transparent so the #howWorld mountain backdrop shows through (it was a solid
     navy fill hiding the scenery — the cause of "the background is just a solid color") */
  background-color: transparent;
  color: var(--how-ink);
  font-family: var(--how-serif);
  -webkit-font-smoothing: antialiased;
  /* generous on top; tight below so the CTA sits right under the closing line */
  padding-block: clamp(5rem, 11vw, 10rem) clamp(1.25rem, 2.5vw, 2rem);
  overflow-x: clip;
}

.how-section,
.how-section *,
.how-section *::before,
.how-section *::after { box-sizing: border-box; }

.how-section ::selection { background: rgba(232, 161, 61, 0.3); color: var(--how-ink); }

/* ---------- shell ---------- */
.how-shell {
  width: min(72rem, 100% - clamp(2.5rem, 8vw, 6rem));
  margin-inline: auto;
}

/* ---------- section head ---------- */
.how-head {
  max-width: 46rem;
  margin: 0 0 clamp(4rem, 9vw, 7rem);
}

.how-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
  font-family: var(--how-mono);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--how-amber);
}
.how-eyebrow::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: var(--how-amber);
  opacity: 0.55;
}

.how-display {
  margin: 0;
  font-family: var(--how-serif);
  font-weight: 350;
  font-size: clamp(2.1rem, 4.8vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--how-ink);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(8, 11, 18, 0.7), 0 1px 4px rgba(8, 11, 18, 0.8);
}
.how-eyebrow, .how-closing, .how-fine { text-shadow: 0 1px 3px rgba(8, 11, 18, 0.92), 0 2px 20px rgba(8, 11, 18, 0.72); }
.how-display-accent {
  font-style: italic;
  font-weight: 350;
  color: var(--how-amber);
}

/* ---------- the three beats ---------- */
.how-beats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: clamp(4.5rem, 9vw, 8rem);
}

.how-beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

/* media */
.how-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--how-radius);
  background: var(--how-coal);
}
.how-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.how-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--how-radius);
  box-shadow:
    inset 0 0 0 1px rgba(241, 236, 226, 0.08),
    inset 0 -76px 96px -48px rgba(10, 14, 24, 0.6);
  pointer-events: none;
}

/* tiny "expedition log" pill on the photo */
.how-meta {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--how-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(241, 236, 226, 0.85);
  background: rgba(10, 14, 24, 0.45);
  border: 1px solid rgba(241, 236, 226, 0.16);
  border-radius: 999px;
  padding: 0.55em 1.1em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

/* glass copy card -- overlaps the photo edge */
.how-card {
  position: relative;
  z-index: 1;
  margin: -3.25rem clamp(0.75rem, 4vw, 2.25rem) 0;
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  background: rgba(12, 15, 20, 0.78);
  border: 1px solid var(--how-hairline);
  border-radius: var(--how-radius);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  box-shadow: 0 32px 80px -42px rgba(0, 0, 0, 0.75);
}

.how-chip {
  display: inline-block;
  margin: 0 0 1.4rem;
  font-family: var(--how-mono);
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  white-space: nowrap;
  color: var(--how-amber);
  background: rgba(232, 161, 61, 0.07);
  border: 1px solid rgba(232, 161, 61, 0.3);
  border-radius: 999px;
  padding: 0.6em 1.15em 0.55em;
}

.how-h {
  margin: 0 0 1rem;
  font-family: var(--how-serif);
  font-weight: 420;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--how-ink);
  text-wrap: balance;
}

.how-body {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(0.98rem, 1.05vw, 1.06rem);
  line-height: 1.72;
  color: var(--how-dim);
}
.how-body + .how-body { margin-top: 0.85em; }

.how-strong {
  font-weight: 540;
  color: var(--how-ink);
}

/* tier chips (beat 03) */
.how-tiers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 1.2rem;
  padding: 0;
}
.how-tier {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--how-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  border: 1px solid;
  border-radius: 999px;
  padding: 0.5em 1em;
}
.how-tier::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.how-tier-range { opacity: 0.92; }

.how-tier--strong  { color: var(--how-tier-strong);  border-color: rgba(232, 161, 61, 0.34);  background: rgba(232, 161, 61, 0.08); }
.how-tier--good    { color: var(--how-tier-good);    border-color: rgba(159, 210, 168, 0.3);  background: rgba(159, 210, 168, 0.07); }
.how-tier--maybe   { color: var(--how-tier-maybe);   border-color: rgba(143, 184, 216, 0.3);  background: rgba(143, 184, 216, 0.07); }
.how-tier--stretch { color: var(--how-tier-stretch); border-color: rgba(185, 164, 196, 0.32); background: rgba(185, 164, 196, 0.08); }

/* ---------- closing line ---------- */
.how-close {
  margin-top: clamp(5rem, 10vw, 8.5rem);
  text-align: center;
  position: relative;
  padding: clamp(1.8rem, 4.5vw, 3rem) 1.2rem clamp(1.4rem, 3.5vw, 2.4rem);
}
/* soft dark scrim so the closing line + fine print stay legible over the bright
   sunlit snow backdrop (W53) */
.how-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 84% at 50% 46%,
    rgba(8, 11, 18, 0.66) 0%, rgba(8, 11, 18, 0.46) 44%, rgba(8, 11, 18, 0) 76%);
}
.how-peak {
  display: block;
  width: 46px;
  height: auto;
  margin: 0 auto 1.5rem;
  color: var(--how-amber);
  opacity: 0.9;
}
.how-closing {
  margin: 0;
  font-family: var(--how-serif);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  color: var(--how-ink);
  text-wrap: balance;
}
.how-fine {
  margin: 1.3rem 0 0;
  font-family: var(--how-mono);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  line-height: 1.9;
  color: var(--how-dim);
}

/* ============================================================
   DESKTOP -- alternating overlap bands (12-col grid)
   ============================================================ */
@media (min-width: 920px) {
  .how-beat {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
  }
  .how-media {
    grid-area: 1 / 1 / 2 / 8;          /* photo: cols 1-7 */
    align-self: stretch;
    min-height: clamp(24rem, 34vw, 30rem);
  }
  .how-img {
    height: 100%;
    aspect-ratio: auto;
  }
  .how-card {
    grid-area: 1 / 7 / 2 / 13;         /* card: cols 7-12, riding the photo edge */
    align-self: center;
    margin: 3.25rem 0;
  }
  /* mirrored band */
  .how-beat--flip .how-media { grid-area: 1 / 6 / 2 / 13; }
  .how-beat--flip .how-card  { grid-area: 1 / 1 / 2 / 7; }
  .how-beat--flip .how-meta  { left: auto; right: 1rem; }
}

/* ============================================================
   MOTION -- CSS-only, respectful.
   Deliberately NO scroll-driven view() reveals: they proved
   unverifiable/flaky under the project's capture rig, and the
   host page already provides transition motion. If revisited,
   gate behind @supports (animation-timeline: view()) and test
   against the verify rig first.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* slow cinematic push on hover */
  .how-img {
    transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .how-media:hover .how-img { transform: scale(1.03); }
body.rm .how-media:hover .how-img { transform: none; }
body.rm .how-img { transition: none; }
}

/* ============================================================
   PHONE -- readability over the bright sunlit backdrop.
   The base (mobile-first) styles let the bright #howWorld snow
   bleed through the 78%-opaque copy cards, and the dim tan body
   text washed out ("you can barely tell it's there"). On phones,
   make the cards near-opaque and lift the body + heading ink so
   the words lead and the scenery sits behind them.
   ============================================================ */
@media (max-width: 700px) {
  .how-card {
    background: rgba(9, 12, 18, 0.94);
    border-color: rgba(241, 236, 226, 0.14);
    box-shadow: 0 22px 54px -28px rgba(0, 0, 0, 0.85);
  }
  .how-body { color: #d9d3c7; font-size: 1.02rem; line-height: 1.72; }
  .how-h { color: #fbf7ee; }
  .how-chip { font-size: 0.74rem; }
}