/* work-first.css
   Homepage intro (since 2026-10-23): a short static intro (who, what, the four
   habits) with the reel starting right below it, so the work is on the
   first screen. Colors and fonts come from the tokens in concept-timeline.css,
   so load this after it. */

/* The reel no longer slides over a pinned intro screen. */
.tp-shell { margin-top: 0; }

.wf {
  --wf-side: clamp(16px, 4vw, 40px);
  --wf-text-2: rgba(243, 245, 236, 0.7);

  padding: 0 var(--wf-side);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

.wf a { color: inherit; }

.wf :focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.wf-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- top row ---------- */

.wf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.wf-name {
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
}

.wf-role {
  margin-left: 4px;
  font-weight: 500;
  color: var(--wf-text-2);
}

.wf-links {
  display: flex;
  gap: 20px;
}

.wf-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.wf-links a:hover { color: var(--lime); }

/* ---------- headline ---------- */

.wf-head {
  margin: 28px 0 0;
  font-weight: 800;
  font-size: clamp(36px, 5.6vw, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.wf-lead,
.wf-phrase {
  display: block;
  text-wrap: balance;
}

.wf-lead {
  max-width: 13ch;
  transition: opacity 0.6s var(--ease);
}

/* Once typed, the phrase grows into room reserved below it (set by
   js/work-first.js) so nothing under the headline moves. */
.wf-phrase {
  max-width: 15ch;
  transform-origin: left top;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.wf-head.is-grown .wf-lead { opacity: 0.4; }
.wf-head.is-grown .wf-phrase { transform: scale(var(--wf-grow, 1.15)); }

/* Untyped letters keep their space so typing never reflows the layout. */
.wf-c { color: transparent; }
.wf-c.is-on { color: inherit; }

.wf-caret {
  display: inline-block;
  width: 0;
  position: relative;
}

.wf-caret::after {
  content: '';
  position: absolute;
  left: 2px;
  top: -0.78em;
  width: 3px;
  height: 0.82em;
  background: var(--lime);
}

.wf-caret.is-off::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wf-lead, .wf-phrase { transition: none; }
}

.wf-lede {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.4;
  color: var(--wf-text-2);
  text-wrap: pretty;
}

.wf-lede strong {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- habits ---------- */

.wf-habits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin: 32px 0 0;
}

.wf-habit {
  border-top: 1px solid var(--line);
  padding: 12px 0 14px;
}

.wf-habit dt {
  margin-bottom: 4px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wf-habit dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--wf-text-2);
}

/* ---------- hand-off to the reel ---------- */

.wf-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 12px 0 16px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--lime);
  text-decoration: none;
}

.wf-cue span { transition: transform 0.2s var(--ease); }
.wf-cue:hover span { transform: translateY(3px); }

@media (min-width: 1024px) {
  .wf-head { margin-top: 48px; }
  .wf-lead { max-width: 17ch; }
  .wf-phrase { max-width: none; }
  .wf-habits {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 32px;
    margin-top: 44px;
  }
  .wf-cue { margin: 20px 0 24px; }
}

@media (max-width: 479px) {
  .wf-role { display: block; margin: 2px 0 0; }
}