/* ── WHAT GOES UP HERE — her second screen, 22 September 2026 ─────────────
 * White with a pink glow behind it, baby pink and neon magenta, lacquered
 * cards, the glossy message box as every press, the neon tube round a heading. */
.way-in { padding-bottom: 1.4rem; }
.way-doors { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.9rem; }
.way-doors .way-go { background:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; color:#fff !important; font-family:'Outfit',sans-serif !important; font-weight:700; padding:.8rem 1.25rem .82rem; position:relative; overflow:visible; isolation:isolate; text-decoration:none; }
.way-doors .way-go--quiet { color:#fff !important; }

.now { padding:1.6rem 0 2.4rem; background:
  radial-gradient(60% 40% at 15% 0%, rgba(255,111,168,.35), transparent 70%),
  radial-gradient(50% 35% at 100% 60%, rgba(233,2,85,.14), transparent 70%),
  linear-gradient(180deg,#fff 0%, #FFEFF5 100%); }
.now-head { display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; padding:0 1rem; max-width:1180px; margin:0 auto .9rem; }
.now-head--two { margin-top:1.6rem; }
.now-head h2 { font-family:'Outfit',sans-serif; font-weight:700; margin:0; color:#111; }
.now-head p { font-family:'Manrope',sans-serif; font-size:14px; color:#6b6068; margin:0; background:none !important; }
.now-head .live { white-space:nowrap; display:inline-flex; align-items:center; gap:.45rem; font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#E90255; }
.now-head .live i { width:8px; height:8px; border-radius:50%; background:#E90255; animation: uv-pulse 1.8s infinite; }
@keyframes uv-pulse { 0%{box-shadow:0 0 0 0 rgba(233,2,85,.55)} 70%{box-shadow:0 0 0 10px rgba(233,2,85,0)} 100%{box-shadow:0 0 0 0 rgba(233,2,85,0)} }
.now-head h2 .neon { display:inline-block; position:relative; isolation:isolate; padding:.42em .8em .48em; color:#C80047; font-size:clamp(30px,4.2vw,50px); letter-spacing:-.02em; line-height:1; margin:.15em 0 .7em; }
.now-head h2 .neon > .bub { position:absolute; left:0; top:0; overflow:visible; z-index:-1; pointer-events:none; filter: drop-shadow(0 0 10px rgba(255,46,126,.5)); }

.rail { display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw,300px); gap:.8rem; overflow-x:auto; scroll-snap-type:x mandatory; /* A SNAP EATS THE GUTTER WITHOUT THIS — measured at 375 on 9 Oct 2026: the second rail on the home loaded already scrolled by exactly its own 16px padding, because a mandatory snap aligns the first card to the SCROLLPORT, which ignores padding. The card sat flush against the left edge of the phone and its title read 'otograph my dad's 80th'. scroll-padding is the one property that tells a snap where the gutter is. */ scroll-padding-left:1rem; scroll-padding-inline-start:1rem; padding:0 1rem 1.2rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; list-style:none; margin:0; }
.rail::-webkit-scrollbar { display:none; }
.rail > li { list-style:none; scroll-snap-align:start; margin:0; padding:0; }
@media (min-width:900px) { .rail { grid-auto-flow:row; grid-template-columns:repeat(3,1fr); max-width:1180px; margin:0 auto; overflow:visible; } }

.shift { display:block; text-decoration:none; color:#111; border-radius:26px; overflow:hidden; background:linear-gradient(180deg,#fff 0%,#FFF6FA 100%);
  box-shadow:0 1px 0 #fff inset, 0 -1px 0 rgba(233,2,85,.10) inset, 0 18px 40px rgba(233,2,85,.18), 0 2px 6px rgba(17,17,17,.06); transition:transform .25s ease, box-shadow .25s ease; }
.shift:hover { transform:translateY(-4px); box-shadow:0 26px 50px rgba(233,2,85,.24), 0 2px 6px rgba(17,17,17,.06); }
.shift-pic { position:relative; aspect-ratio:4/3; background:#FFEFF5; }
.shift-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.shift-pic::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 35%, rgba(233,2,85,.18) 100%); pointer-events:none; }
/* ── A CARD WITH NO PHOTOGRAPH — 29 September 2026 ────────────────────────
 * It was a 96px letter sitting in the middle of a pink square, which reads as
 * a picture that failed to arrive. **Every real piece of work somebody puts up
 * draws this card** — `uniiverse_draw_real_work_card()` is always plain — so it
 * is not a fallback, it is this world's main card, and it has to look composed.
 * It is her own bubble now, with the letter inside it and the light coming
 * across it, so a card with no photograph is a card wearing her mark. */
.shift--plain .shift-pic { display:grid; place-items:center; position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 18% 0%, #FF8CBB 0%, #FF2E7E 45%, #C80047 100%); }
.shift--plain .shift-pic::before { content:""; position:absolute; width:56%; aspect-ratio:1.06/1;
  background:linear-gradient(160deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,.03) 100%);
  border-radius:46% 46% 46% 9% / 48% 48% 48% 11%;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(200,0,71,.18), 0 14px 30px rgba(120,0,40,.22); }
.shift--plain .shift-pic::after { background:linear-gradient(200deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%, rgba(120,0,40,.22) 100%); }
.shift--plain .shift-pic .shift-mark { position:relative; font-family:'Outfit',sans-serif; font-weight:700;
  font-size:clamp(44px,7.5vw,62px); letter-spacing:-.04em; line-height:1; color:#fff; opacity:1;
  text-shadow:0 6px 18px rgba(120,0,40,.4); transform:translateY(-3%); }
.shift--plain:hover .shift-pic::before { transform:scale(1.04); transition:transform .5s ease; }
.shift-pic .who { position:absolute; left:14px; bottom:12px; display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-radius:999px; padding:.35rem .75rem .35rem .4rem; font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; color:#111; }
.shift-pic .who b { width:22px; height:22px; border-radius:50%; background:#E90255; color:#fff; display:inline-grid; place-items:center; font-size:11px; }
.shift-pic .when { position:absolute; right:12px; top:12px; z-index:2; padding:.42rem .8rem .45rem; font-family:'Outfit',sans-serif; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.shift-body { padding:1.05rem 1.1rem 1.15rem; }
.shift-role { font-family:'Outfit',sans-serif; font-weight:600; font-size:clamp(18px,2vw,22px); letter-spacing:-.02em; line-height:1.15; margin:0 0 .35rem; background:none !important; }
.shift-line { font-family:'Manrope',sans-serif; font-size:14px; color:#6b6068; margin:0 0 .8rem; background:none !important; }
.shift-line b { color:#E90255; font-weight:700; }
.shift-foot { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.shift-foot .shift-pay { display:inline-flex; align-items:baseline; font-family:'Outfit',sans-serif; font-weight:700; font-size:20px; letter-spacing:-.02em; color:#111 !important; }
.shift-foot .shift-pay small { font-family:'Manrope',sans-serif; font-weight:500; font-size:12px; color:#6b6068; margin-left:.25rem; letter-spacing:0; }
.shift-foot--alone { justify-content:flex-end; }
.shift-foot .go { padding:.7rem 1.15rem .72rem; font-family:'Outfit',sans-serif; font-weight:700; font-size:15px; color:#fff; white-space:nowrap; }
.shift:hover .go { transform:translateY(-2px); }
.now-under { text-align:center; margin:.6rem 1rem 0; }
.now-under .bubble { display:inline-block; padding:.9rem 1.5rem; font-family:'Outfit',sans-serif; font-weight:700; font-size:17px; color:#fff !important; text-decoration:none !important; }

/* the bubble itself: no box behind it — the drawing is the whole shape */
.bubble, .shift-foot .go, .shift-pic .when, .way-doors .way-go { background:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; text-shadow:none; position:relative; overflow:visible; isolation:isolate; transition:transform .18s ease; }
.bubble > .bub, .shift-foot .go > .bub, .shift-pic .when > .bub, .way-doors .way-go > .bub { position:absolute; left:0; top:0; overflow:visible; z-index:-1; pointer-events:none; filter:drop-shadow(0 8px 16px rgba(233,2,85,.35)); }
.shift-pic .when > .bub { filter:drop-shadow(0 4px 10px rgba(233,2,85,.35)); }
.bubble:hover, .way-doors .way-go:hover { transform:translateY(-2px); }

/* the line over the night market: baby pink, neon magenta — hers, 22 September 2026 */
.way-in { background:#FFEFF5 !important; background-image:none !important; color:#E90255 !important; }
.way-head { color:#E90255 !important; text-shadow:0 0 18px rgba(233,2,85,.28), 0 2px 0 rgba(255,255,255,.9); }

/* ── THE TWO DOORS, EQUAL — hers, 22 September 2026: way more exciting ─── */
.sec--what { background: radial-gradient(60% 40% at 85% 0%, rgba(255,111,168,.35), transparent 70%), linear-gradient(180deg,#FFEFF5 0%, #fff 100%) !important; padding:2rem 0 2.6rem !important; }
.sec--what .what-eyebrow { display:none; }
.what-else { display:grid; grid-template-columns:1fr; gap:1.2rem; padding:0 1rem; max-width:1180px; margin:0 auto; }
@media (min-width:820px) { .what-else { grid-template-columns:1fr 1fr; gap:1.4rem; } }
.what-lane, .what-lane--street, .what-lane--shop { background:linear-gradient(180deg,#fff 0%,#FFF6FA 100%) !important; color:#111 !important; border:0 !important; border-radius:30px !important; padding:0 !important; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 0 #fff inset, 0 -1px 0 rgba(233,2,85,.10) inset, 0 22px 48px rgba(233,2,85,.20), 0 2px 6px rgba(17,17,17,.06) !important; transition:transform .25s ease, box-shadow .25s ease; }
.what-lane:hover { transform:translateY(-4px); box-shadow:0 30px 60px rgba(233,2,85,.26), 0 2px 6px rgba(17,17,17,.06) !important; }
.what-lane-pic { position:relative; aspect-ratio:16/9; overflow:hidden; }
.what-lane-pic img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.what-lane:hover .what-lane-pic img { transform:scale(1.04); }
.what-lane-pic::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 40%, rgba(233,2,85,.22) 100%); pointer-events:none; }
.what-lane-in { padding:1.1rem 1.25rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.what-lane-who { margin:-3.2rem 0 .2rem !important; position:relative; z-index:3; font-size:0; letter-spacing:0; text-transform:none; }
.what-lane-who .neon { display:inline-block; position:relative; isolation:isolate; padding:.42em .8em .48em; color:#C80047; font-family:'Outfit',sans-serif; font-weight:700; font-size:clamp(30px,3.6vw,44px); letter-spacing:-.02em; line-height:1; margin:0; background:#FFEFF5; border-radius:18px 18px 18px 4px; }
.what-lane-who .neon > .bub { position:absolute; left:0; top:0; overflow:visible; z-index:-1; pointer-events:none; filter:drop-shadow(0 0 10px rgba(255,46,126,.5)); }
.what-lane-head { font-family:'Outfit',sans-serif !important; font-weight:700 !important; font-size:clamp(24px,2.8vw,34px) !important; letter-spacing:-.025em; line-height:1.06 !important; color:#111 !important; margin:.4rem 0 .2rem !important; text-transform:none !important; }
.what-lane-says { font-family:'Manrope',sans-serif !important; font-size:clamp(15px,1.4vw,17px) !important; line-height:1.5; color:#5a4f56 !important; margin:0 0 .9rem !important; }
.what-lane-go, .what-lane--shop .what-lane-go { align-self:flex-start; margin-top:auto; background:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; color:#fff !important; font-family:'Outfit',sans-serif !important; font-weight:700; font-size:16px; padding:.8rem 1.3rem .82rem; position:relative; overflow:visible; isolation:isolate; text-decoration:none !important; transition:transform .18s ease; }
.what-lane-go > .bub { position:absolute; left:0; top:0; overflow:visible; z-index:-1; pointer-events:none; filter:drop-shadow(0 8px 16px rgba(233,2,85,.35)); }
.what-lane:hover .what-lane-go { transform:translateY(-2px); }

/* ── THE COUNTER, IN THIS WORLD'S CLOTHES — 22 September 2026 ─────────────
 * The one more moment where a neighbour pays the dollar and a business its
 * month: white with the pink glow, the sign in Outfit, the press a glossy
 * message box, the quiet lines in Manrope. Loaded on every page, so the
 * counter is dressed wherever the road lands. */
main.lam-pay-page { padding:1.6rem 1rem 3.2rem; min-height:60vh; background:radial-gradient(60% 40% at 15% 0%, rgba(255,111,168,.30), transparent 70%), linear-gradient(180deg,#fff 0%, #FFEFF5 100%); }
.lam-pay-page h1, .lam-pay-page__said { font-family:'Outfit',sans-serif !important; font-weight:600 !important; font-size:clamp(28px,4vw,42px) !important; letter-spacing:-.025em; color:#111 !important; text-align:center; margin:0 0 1.2rem !important; }
.lam-pay { max-width:520px; margin:0 auto; padding:1.4rem 1.3rem 1.5rem; border-radius:26px; background:linear-gradient(180deg,#fff 0%,#FFF6FA 100%); box-shadow:0 1px 0 #fff inset, 0 -1px 0 rgba(233,2,85,.10) inset, 0 18px 40px rgba(233,2,85,.16), 0 2px 6px rgba(17,17,17,.05); }
.lam-pay__or { color:#6b6068; font:400 14px/1.4 'Manrope',sans-serif; text-align:center; }
.lam-pay__go { display:block; width:100%; margin:18px 0 0; padding:17px 20px; border:0; border-radius:999px; cursor:pointer; font:700 17px/1 'Outfit',sans-serif; color:#fff; background:#E90255; box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 8px 16px rgba(233,2,85,.35); }
.lam-pay__go:active { transform:translateY(2px); }
.lam-pay__quiet, .lam-pay__trouble { color:#6b6068; font:400 14px/1.45 'Manrope',sans-serif; text-align:center; margin:12px 0 0; }
.lam-pay__trouble { color:#C80047; }

/* ── A CARD WITH NO PHOTOGRAPH ─────────────────────────────────────────────
 *
 * Hers, 9 October 2026: "plain houses though — make it fucking brilliant."
 *
 * It was a single huge letter on a flat pink block, which beside a real
 * photograph of a cake reads as an image that failed to load. It is now
 * somebody's message, in the same glass as her hero pops, with a tail. The
 * ask lives in the bubble, so the body beneath never repeats it.
 */
.shift--plain .shift-pic {
	display: grid;
	place-items: center;
	padding: clamp(1.1rem, 5vw, 1.6rem);
	background:
		radial-gradient(120% 100% at 18% 12%, rgba(255,255,255,.26), transparent 62%),
		linear-gradient(158deg, #FF2E72 0%, #F0135F 54%, #D9004E 100%);
}

.shift--plain .shift-pic::before,
.shift--plain .shift-pic::after { content: none; }

.shift-said {
	position: relative;
	display: block;
	max-width: 15ch;
	padding: clamp(.85rem, 4vw, 1.15rem) clamp(1rem, 4.6vw, 1.35rem);
	border-radius: 20px;
	background: linear-gradient(168deg, rgba(255,255,255,.54) 0%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.32) 100%);
	border: 1.5px solid rgba(255, 255, 255, .92);
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,.8),
		inset 0 -9px 20px rgba(217,0,78,.16),
		0 18px 40px -20px rgba(150, 0, 54, .6);
	-webkit-backdrop-filter: blur(7px) saturate(150%);
	backdrop-filter: blur(7px) saturate(150%);
	color: #FFFFFF;
	font: 600 clamp(1.02rem, 4.4vw, 1.2rem)/1.22 var(--font-say, system-ui, sans-serif);
	letter-spacing: -.005em;
	text-shadow: 0 1px 10px rgba(140, 0, 48, .36);
	text-wrap: balance;
}

.shift-said::after {
	content: "";
	position: absolute;
	left: 26px;
	bottom: -8px;
	width: 16px;
	height: 16px;
	background: inherit;
	border-right: 1.5px solid rgba(255, 255, 255, .92);
	border-bottom: 1.5px solid rgba(255, 255, 255, .92);
	border-bottom-right-radius: 3px;
	transform: rotate(45deg) skew(-6deg, -6deg);
}