/* launchhome.css · 11-04 (hype-crypto-web lane) · the launch Home and the three Create doors, drawn only with the Culture Club's tokens
   (--bg --bg2 --bg3 --card --ink --ink2 --line --acc --acc-ink --acc-soft --live): the look stays his, the product is launches. Targets ≥ 44 px, text ≥ 13 px. */

.lh-home { display: grid; gap: 30px; min-width: 0 }
.lh-hero { display: grid; gap: 14px; padding: clamp(22px, 4vw, 40px) clamp(18px, 4vw, 40px); border-radius: 24px; background: radial-gradient(120% 90% at 90% 0%, var(--acc-soft), rgba(0, 0, 0, 0) 60%), var(--card); border: 1px solid var(--line) }
.lh-hero h1 { margin: 0; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.02; font-weight: 900; letter-spacing: -.02em; color: var(--ink) }
.lh-hero p { margin: 0; max-width: 46ch; font-size: 16px; color: var(--ink2) }

/* the three doors */
.lh-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px }
.lh-door { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 8px 16px 8px 10px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s ease }
.lh-door:hover { border-color: var(--acc) }
.lh-door .lh-door-o, .lh-door .cpic { flex: none; width: 44px; height: 44px }
.lh-door-x { display: grid; gap: 2px; min-width: 0 }
.lh-door-x b { font-size: 16px }
.lh-door-x span { font-size: 13px; color: var(--ink2) }
.lh-door > svg.lh-door-go { flex: none; width: 18px; height: 18px; color: var(--ink2); margin-left: auto; transform: scaleX(-1) }
.lh-doors.big { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px }
.lh-doors.big .lh-door { flex-direction: column; align-items: flex-start; gap: 14px; min-height: 200px; padding: 22px; border-radius: 24px }
.lh-doors.big .lh-door .lh-door-o, .lh-doors.big .lh-door .cpic { width: 96px; height: 96px }
.lh-doors.big .lh-door-x b { font-size: 22px }
.lh-doors.big .lh-door-x span { font-size: 15px }
.lh-doors.big .lh-door > svg { margin: auto 0 0 auto }

/* rows: a swipe row on a phone, a full grid on a wide screen (nothing cut at the edge) */
.lh-row, .lh-live { display: grid; gap: 12px; min-width: 0 }
.lh-live:empty { display: none }
.lh-row-h { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.lh-row-h h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; color: var(--ink) }
.lh-row-h h2 svg { width: 20px; height: 20px }
.lh-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 14px }
.lh-row-s { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 82%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none }
.lh-row-s::-webkit-scrollbar { display: none }
.lh-row-s > * { scroll-snap-align: start; min-width: 0 }
@media (min-width: 900px) { .lh-row-s { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow: visible } }

/* an event, the Luma way: the date tile, the time and place, the host, who is going, RSVP */
.lh-ev { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px 14px; align-content: start; padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line) }
.lh-ev-date { display: grid; place-items: center; align-content: center; width: 60px; height: 64px; border-radius: 16px; background: var(--acc-soft); color: var(--ink); text-decoration: none }
.lh-ev-date b { font-size: 24px; line-height: 1; font-weight: 900 }
.lh-ev-date span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2) }
.lh-ev-x { display: grid; gap: 4px; min-width: 0 }
.lh-ev-t { font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--ink); text-decoration: none; overflow-wrap: anywhere }
/* the title links' tap area reaches 44 px; the negative margin keeps the card's lines where they were */
.lh-ev-t, .lh-wl-t { display: block; padding: 12px 0; margin: -12px 0 }
.lh-ev-m { font-size: 13px; color: var(--ink2); overflow-wrap: anywhere }
.lh-ev-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink2) }
.lh-ev-g { font-variant-numeric: tabular-nums }
.lh-go { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px }
.lh-go svg { width: 16px; height: 16px }

/* a waitlist: its picture, the line count, your place, join or invite to move up */
.lh-wl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 14px; align-content: start; padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line) }
.lh-wl-p { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; overflow: hidden; background: var(--bg2) }
.lh-wl-p > * { width: 100%; height: 100% }
.lh-wl-x { display: grid; gap: 4px; align-content: center; min-width: 0 }
.lh-wl-t { font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--ink); text-decoration: none; overflow-wrap: anywhere }
.lh-wl-n { font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums }
.lh-wl-n b { font-size: 15px; color: var(--ink) }

/* the king of the line, the sample badge */
.lh-king { display: grid; gap: 6px; min-width: 0 }
.lh-crown { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-size: 13px; font-weight: 800 }
.lh-crown svg { width: 14px; height: 14px }
.lh-sample { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--bg3); color: var(--ink2); font-size: 13px; font-weight: 700 }

/* the six chips in the header: every link a 44 px target at every width (culture.css drops them to 40 px under 759 px; Codex can move this into culture.css) */
/* flex: none keeps each chip its own width in the scroll row (a bare min-width let them shrink to 44 px and the words ran together, 20:0xZ) */
.culture-departments a { flex: none; min-height: 44px; min-width: 44px; justify-content: center }

/* Create: the three doors */
.lh-create { display: grid; gap: 14px; max-width: 1100px }
.lh-create h1 { margin: 0; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; font-weight: 900; color: var(--ink) }
.lh-create > p { margin: 0 0 8px; font-size: 16px; color: var(--ink2) }