/* Homepage layout tweaks — collapsed roles + 3D craft chips */

.journey-fold {
  border-top: none;
}
.journey-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1.1rem 0;
  font-size: 1.05rem;
  color: var(--muted);
}
.journey-fold > summary::-webkit-details-marker { display: none; }
.journey-fold-hint {
  font-family: var(--mono);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fce7a;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.journey-fold-hint::before { content: "["; }
.journey-fold:not([open]) .journey-fold-hint::after { content: " — Show]"; }
.journey-fold[open] .journey-fold-hint::after { content: " — Hide]"; }
.journey-fold > summary:hover .journey-fold-hint,
.journey-fold > summary:focus-visible .journey-fold-hint {
  color: #2563eb;
}
html[data-bg-custom="1"] .journey-fold-hint {
  color: #111111;
}
html[data-bg-custom="1"] .journey-fold > summary:hover .journey-fold-hint,
html[data-bg-custom="1"] .journey-fold > summary:focus-visible .journey-fold-hint {
  color: #2563eb;
}
.journey-fold[open] {
  background: linear-gradient(180deg, rgba(143, 206, 122, 0.16), transparent 8rem);
}
html[data-bg-custom="1"] .journey-fold[open] {
  background: transparent;
}
.journey-fold .journey { border-top: none; margin-top: 0.35rem; }

.craft-hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin: -0.6rem 0 1.1rem;
}
.craft-cloud {
  gap: 0.7rem;
}
.craft-cloud .chip {
  position: relative;
  isolation: isolate;
  padding: 0.52rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--muted);
  font-size: 0.88rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 72% 88%, rgba(0, 0, 0, 0.16), transparent 52%),
    var(--bg-2);
  box-shadow:
    inset 0 6px 10px rgba(255, 255, 255, 0.22),
    inset 0 -8px 12px rgba(0, 0, 0, 0.14),
    0 8px 16px rgba(0, 0, 0, 0.16);
  cursor: grab;
  user-select: none;
  touch-action: none;
  overflow: hidden;
  transition:
    transform 0.22s var(--ease),
    box-shadow 0.22s var(--ease),
    border-color var(--t),
    color var(--t);
}
.craft-cloud .chip:active { cursor: grabbing; }
.craft-cloud .chip.is-dragging {
  opacity: 0.45;
  transform: scale(0.96);
}
.craft-cloud .chip.is-painted {
  border-color: transparent;
  color: var(--chip-fg, var(--text));
  background: var(--chip-bg, var(--bg-2));
}
.craft-cloud .chip:hover {
  color: var(--text);
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    inset 0 7px 12px rgba(255, 255, 255, 0.28),
    inset 0 -9px 14px rgba(0, 0, 0, 0.14),
    0 14px 22px rgba(0, 0, 0, 0.22);
}
.craft-cloud .chip.is-painted:hover {
  color: var(--chip-fg, var(--text));
}

.hero-photo.is-eyedrop {
  cursor: crosshair;
}
.hero-drop-hud {
  position: absolute;
  z-index: 4;
  left: 12px;
  bottom: 12px;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: rgba(10, 10, 10, 0.72);
  color: #f4f4f4;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
  backdrop-filter: blur(8px);
}
.hero-photo.is-eyedrop:hover .hero-drop-hud,
.hero-photo.is-eyedrop:focus-within .hero-drop-hud {
  opacity: 1;
  transform: none;
}
.hero-drop-hud .hud-swatch {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.45em;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  vertical-align: -0.05em;
}