/* ===== utkxh mobile (≤760px) — v7 ==========================================================================
   One design system with desktop. The phone canvas is 780 × 1688 *desktop px*, shown at ½ (390 × 844) and scaled to
   fit like the desktop stage. Components reuse the desktop classes/tokens (chat chips, playlist drum, experience tiles,
   social tiles, tag pill, nav, glass buttons). Only small text is lifted for phone legibility
   (desktop 14px mono → 20, 18px body → 26, 28px bio → 30), so the hierarchy stays the same.            */
#mob { display: none; }
html.m .viewport, html.m .intro, html.m body > .mode-toggle, html.m .modal, html.m .fcursor { display: none !important; }
html.m body::before, html.m body::after { display: none; }
html.m #mob { display: block; position: fixed; inset: 0; z-index: 50; overflow: hidden; color: var(--ink); font-family: var(--sans);
  background: radial-gradient(120% 60% at 0 0, var(--bg-glow, var(--bg)), var(--bg) 62%), var(--bg); -webkit-tap-highlight-color: transparent; }
#mob { --mo: cubic-bezier(.2, 1, .32, 1); --mio: cubic-bezier(.5, 0, .2, 1); }

/* preview helper: phone frame on wide screens */
html.m-frame #mob { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(390px, calc((100vh - 40px) * 390 / 844)); height: min(844px, calc(100vh - 40px));
  border-radius: 44px; box-shadow: 0 0 0 10px #222, 0 0 0 11px #3a3a3a, 0 40px 80px -30px #000; }
html.m-frame body { background: #0c0c0d !important; }
.mframe-btn { position: fixed; right: 16px; top: 16px; z-index: 200; padding: 10px 14px; border-radius: 99px; border: 0; cursor: pointer;
  background: #111; color: #fff; font: 500 12px var(--mono); box-shadow: 0 0 0 1px #ffffff2a, 0 10px 20px -10px #000; }

/* the canvas */
.m-cv { position: absolute; left: 50%; top: 50%; width: 780px; height: 1688px; transform: translate(-50%, -50%) scale(var(--ms, .5)); }
.mv { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 48px 150px; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(24px); filter: blur(10px);
  transition: opacity .5s var(--mo), transform .7s var(--mo), filter .5s var(--mo), visibility 0s .5s; }
.mv > * { flex: none; }
.mv.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .55s var(--mo) .05s, transform .8s var(--mo) .05s, filter .6s var(--mo) .05s; }
.mv.is-enter > * { animation: m-rise .85s var(--mo) both; }
.mv.is-enter > *:nth-child(2) { animation-delay: .04s; } .mv.is-enter > *:nth-child(3) { animation-delay: .08s; } .mv.is-enter > *:nth-child(4) { animation-delay: .12s; }
.mv.is-enter > *:nth-child(5) { animation-delay: .16s; } .mv.is-enter > *:nth-child(6) { animation-delay: .2s; } .mv.is-enter > *:nth-child(7) { animation-delay: .24s; }
.mv.is-enter > *:nth-child(8) { animation-delay: .28s; } .mv.is-enter > *:nth-child(n+9) { animation-delay: .32s; }
@keyframes m-rise { from { opacity: 0; transform: translateY(40px); filter: blur(10px); } }

/* ── About ─────────────────────────────────────────── */
.mv-about { padding-top: 76px; }
.m-hdr { display: flex; align-items: center; gap: 24px; }
.m-av { width: 88px; height: 88px; flex: none; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--line), 0 18px 30px -16px rgb(var(--shadow) / .55); }
.m-id { min-width: 0; flex: 1 1 auto; }
.m-nm { margin: 0; font: 400 22px/1 var(--pixel); color: var(--ink); }
.m-tt { margin-top: 8px; font: 400 46px/1.1 var(--pixel); color: var(--ink); white-space: nowrap; }
.m-tt .flip { clip-path: inset(-6px -80px -10px -6px); }
.m-soc { display: flex; gap: 12px; margin-left: auto; }
#mob .m-soc .social { position: relative; left: auto; top: auto; inset: auto; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; flex: none; }
#mob .m-soc .social svg { width: 26px; }
.m-rule { flex: none; margin: 32px -48px 0; border: 0; border-top: 1px solid var(--line); }

/* questions + answer: the desktop chat, same classes */
.m-chat { margin-top: 36px; font: 400 30px/46px var(--sans); letter-spacing: -.01em; }
#mob .pv-chat .pc-q { margin-bottom: 22px; }
#mob .pv-chat .pc-chip { font-size: 19px !important; padding: 11px 15px !important; letter-spacing: -.02em; }
#mob .pv-chat .pc-a { display: block; max-width: none !important; min-height: 286px; text-wrap: pretty; }
#mob .pv-chat .pc-a u { height: 32px; }

/* section heads: desktop mono label + hairline */
.m-sh { display: flex; align-items: center; gap: 18px; margin-top: 32px; font: 500 20px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.m-sh a { color: inherit; text-decoration: none; }
.m-sh i { flex: 1; height: 1px; background: var(--line); }

/* playlist: the desktop drum */
#mob .m-pl.plist { position: relative; left: auto; top: auto; width: auto !important; height: 232px; margin-top: 4px !important; border-radius: 0; overflow: hidden;
  perspective: 620px; perspective-origin: 50% 116px; cursor: pointer; touch-action: pan-x; }
#mob .m-pl .plist__wheel { position: absolute; left: 0; right: 0; top: 74px; }
#mob .m-pl .plrow { height: 84px; padding: 0 84px 0 2px; gap: 26px; }
#mob .m-pl .plrow__txt { max-width: 520px; gap: 4px; }
#mob .m-pl .plrow__txt b { font: 600 30px/1.15 var(--sans); letter-spacing: -.01em; }
#mob .m-pl .plrow__txt small { font: 400 20px/1.3 var(--mono); letter-spacing: .02em; }
#mob .m-pl .plrow__pp svg { width: 26px; height: 26px; }
#mob .m-pl .plblur { right: 84px; height: 74px; }
#mob .m-pl .plist__arr { right: 0; width: 52px; height: 52px; border: 0; padding: 0; cursor: pointer; }
#mob .m-pl .plist__arr svg { width: 16px; height: 16px; }
#mob .m-pl .plist__arr--up { top: 58px; } #mob .m-pl .plist__arr--dn { top: 122px; bottom: auto; }

/* experience: the desktop tiles, untouched (648 × 225) */
.m-xpw { display: flex; justify-content: center; height: 225px; margin-top: 22px; }
#mob .m-xp.xp { position: relative; left: auto; top: auto; inset: auto; width: 648px; height: 225px; margin-top: 0 !important; opacity: 1; transform: none; flex: none; }

/* story: same card, same glass frame */
.m-story { position: relative; flex: 1 1 auto; min-height: 240px; margin-top: 36px; border-radius: 44px; overflow: hidden; background: #111; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line), 0 11px 9px rgb(var(--shadow) / .25), 0 40px 60px -30px rgb(var(--shadow) / .5); }
.m-sl { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s cubic-bezier(.37, 0, .2, 1); }
.m-sl.on { opacity: 1; z-index: 1; }
.m-sl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6.5s linear; }
.m-sl.on img { transform: scale(1); }
.m-sl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0000 40%, #000a); }
.m-sl p { position: absolute; z-index: 2; left: 46px; right: 46px; bottom: 40px; margin: 0; font: 400 26px/38px var(--sans); color: #fff; text-wrap: pretty;
  opacity: 0; transform: translateY(10px); transition: opacity .6s var(--mo) .35s, transform .8s var(--mo) .35s; }
.m-sl.on p { opacity: 1; transform: none; }
.m-sl p u { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.m-lens { position: absolute; z-index: 3; inset: 16px; border: 4.4px solid #fff; border-radius: 30px; pointer-events: none;
  -webkit-mask: linear-gradient(transparent 22%, #000 72%); mask: linear-gradient(transparent 22%, #000 72%); }
.m-lens--soft { filter: blur(5px); opacity: .7; -webkit-mask: linear-gradient(#000 10%, transparent 62%); mask: linear-gradient(#000 10%, transparent 62%); }

/* ── Work ──────────────────────────────────────────── */
.mv-work { padding-top: 150px; }
.w-top { line-height: 0; }
#mob .w-tag { display: inline-block; position: static; font-size: 19px; line-height: 1; padding: 9px 16px; transition: opacity .25s var(--mo), filter .3s var(--mo); }
.w-t { margin: 22px 0 0; font: 400 64px/1.04 var(--pixel); color: var(--ink); text-wrap: balance; }
.w-d { margin: 14px 0 0; font: 400 30px/44px var(--sans); letter-spacing: -.01em; color: color-mix(in srgb, var(--ink) 72%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-pl { position: relative; margin-top: 36px; aspect-ratio: 16 / 9; border-radius: 44px; overflow: hidden; background: #000; cursor: pointer;
  box-shadow: 0 0 0 1px var(--line), 0 10px 6.5px rgb(var(--shadow) / .25), 0 40px 70px -30px rgb(var(--shadow) / .55);
  transition: opacity .3s var(--mo), filter .35s var(--mo); }
.w-pl img, .w-pl video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-pl::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(#0000004d, #0000 26%, #0000 58%, #000000a6); }
.w-cnt { position: absolute; z-index: 2; right: 34px; top: 30px; font: 400 20px/1 var(--mono); letter-spacing: .06em; color: #ffffff99; }
.w-pl .bt { position: absolute; z-index: 2; left: 34px; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 14px; }
.w-pl .tm { font: 400 20px/1 var(--mono); letter-spacing: .04em; color: #ffffffd9; font-variant-numeric: tabular-nums; min-width: 56px; }
.w-pl .bt > i { flex: 1; height: 2px; border-radius: 2px; background: #ffffff38; overflow: hidden; } .w-pl .bt > i b { display: block; height: 100%; width: 0; background: #fff; }
.w-btn { flex: none; width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: #0000002e; box-shadow: inset 0 0 0 1px #ffffff40; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .5s cubic-bezier(.34, 1.12, .5, 1), background .3s; }
.w-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w-btn:active { transform: scale(.92); background: var(--accent); color: var(--accent-ink, #111); }
.w-pl.out { opacity: .25; filter: blur(10px); }
.w-p { margin: 34px 0 0; font: 400 27px/42px var(--sans); color: color-mix(in srgb, var(--ink) 60%, transparent);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.w-t, .w-d, .w-p { transition: opacity .25s var(--mo), filter .3s var(--mo), transform .45s var(--mo); }
.w-tag.out, .w-t.out, .w-d.out, .w-p.out { opacity: 0; filter: blur(8px); transform: translateY(8px); }
/* Details: the desktop WORK → DETAILS rail, standing up */
.w-det { margin: 30px auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 4px 40px; border: 0; background: none; cursor: pointer; }
.w-det .rail { position: relative; width: 2px; height: 70px; background: var(--line); }
.w-det .knob { position: absolute; left: 50%; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 35%, transparent); transition: top .7s var(--mio), box-shadow .3s; }
.w-det.on .knob { top: 70px; }
.w-det .lb { font: 500 20px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); transition: color .3s; }
.w-det.on .lb, .w-det:active .lb { color: var(--ink); }
/* film strip: the desktop stack, laid flat */
.w-strip { margin: auto -48px 0; height: 210px; display: flex; align-items: center; gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 0 240px; }
.w-strip::-webkit-scrollbar { display: none; }
.w-c { --off: 2; flex: none; width: calc(300px - min(var(--off), 1) * 90px - max(var(--off) - 1, 0) * 50px); aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer;
  border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--ink) 10%, var(--bg));
  box-shadow: 0 0 0 1px #0000000d, 0 14px 28px -16px rgb(var(--shadow) / .55); filter: blur(calc(min(var(--off), 1) * 1.6px)) saturate(.8);
  transition: width .6s var(--mo), filter .45s var(--mo), opacity .45s; }
.w-c:not(.on) { opacity: .85; }
.w-c.on { border-radius: 22px; filter: none; opacity: 1; box-shadow: 0 0 0 1px var(--line), 0 18px 30px -14px rgb(var(--shadow) / .6); }
.w-c img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── nav + the two round glass buttons (desktop mode toggle family) ── */
.m-nav { position: absolute; z-index: 30; left: 50%; bottom: 44px; transform: translateX(-50%); width: 544px; height: 77px; display: grid; grid-template-columns: repeat(3, 1fr);
  border-radius: 39px; background: var(--nav); box-shadow: inset 0 1px 0 var(--surface-hi, #fff), 0 0 0 1px var(--line), 0 22px 40px -20px rgb(var(--shadow) / .5);
  font: 400 27px/1 var(--mono); letter-spacing: -.01em; }
.m-nav .kn { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% / 3); border-radius: 39px; background: var(--nav-active, var(--ink));
  box-shadow: 0 8px 16px -8px rgb(var(--shadow) / .6); transition: transform .72s var(--mio), filter .35s var(--mo); }
.m-nav .kn.is-moving { filter: blur(2.4px); }
html[data-mode="dark"] .m-nav .kn { background: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.m-nav a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--nav-ink, var(--ink-soft)); text-decoration: none; transition: color .4s; }
.m-nav a.on { color: var(--nav-active-ink, var(--bg)); }
html[data-mode="dark"] .m-nav a.on { color: var(--ink); }
.m-nav a svg { width: 18px; height: 18px; color: var(--accent); margin-top: -8px; }
.m-round { position: absolute; z-index: 30; bottom: 50px; width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .5s cubic-bezier(.34, 1.12, .5, 1); }
.m-round:active { transform: scale(.92); }
.m-round svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-mode { right: 24px; } .m-talk { left: 24px; }
html[data-mode="dark"] .m-mode .i-moon, html:not([data-mode="dark"]) .m-mode .i-sun { display: none; }

/* ── sheet (Details / Experience) — desktop details page typography ── */
.m-dim { position: absolute; inset: 0; z-index: 40; background: #0007; opacity: 0; pointer-events: none; transition: opacity .45s var(--mo); }
.m-dim.on { opacity: 1; pointer-events: auto; }
.m-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; height: 88%; display: flex; flex-direction: column; border-radius: 64px 64px 0 0; background: var(--bg);
  box-shadow: 0 -40px 80px -20px rgb(var(--shadow) / .5), inset 0 1px 0 var(--line); transform: translateY(105%); transition: transform .65s var(--mo); }
.m-sheet.on { transform: none; }
.m-sheet .grab { flex: none; padding: 20px 0 30px; cursor: grab; touch-action: none; }
.m-sheet .grab i { display: block; width: 80px; height: 8px; border-radius: 8px; margin: 0 auto; background: var(--ink-soft); opacity: .45; }
.m-sheet .body { flex: 1; overflow-y: auto; padding: 0 48px 120px; overscroll-behavior: contain; scrollbar-width: none; }
.m-sheet .body::-webkit-scrollbar { display: none; }
#mob .m-sheet .feature__tag2 { display: inline-block; position: static; font-size: 19px; line-height: 1; padding: 9px 16px; }
.m-dt { margin: 22px 0 0; font: 400 60px/1.04 var(--pixel); color: var(--ink); }
.m-rule--in { margin: 36px 0; }
.m-lead { margin: 0; font: 400 34px/48px var(--sans); letter-spacing: -.01em; color: var(--ink); }
.m-p { margin: 24px 0 0; font: 400 27px/42px var(--sans); color: color-mix(in srgb, var(--ink) 60%, transparent); }
.m-k { margin: 44px 0 18px; font: 500 20px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.m-chips span { display: inline-block; margin: 0 10px 12px 0; padding: 11px 20px; border-radius: 99px; font: 500 25px/1 var(--sans); color: var(--ink);
  background: color-mix(in srgb, var(--nav) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.m-pts { margin: 0 0 0 34px; padding: 0; font: 400 27px/42px var(--sans); color: color-mix(in srgb, var(--ink) 72%, transparent); }
.m-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.m-shots img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 28px; box-shadow: 0 0 0 1px var(--line); }
.m-shots img:first-child { grid-column: 1 / 3; aspect-ratio: 16 / 9; border-radius: 44px; }
.m-th { margin: 0 0 28px; font: 400 44px/1 var(--pixel); color: var(--ink); }
.m-tools { display: flex; flex-wrap: wrap; gap: 26px 30px; }
.m-tool { display: grid; justify-items: center; gap: 14px; }
.m-tool b { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 26px; background: var(--surface, #fff); color: var(--ink); font: 600 40px var(--sans);
  box-shadow: 0 0 0 1px var(--line), 0 14px 24px -14px rgb(var(--shadow) / .35); }
.m-tool b img { width: 56px; height: 56px; object-fit: contain; }
.m-tool i { font: 400 18px/1 var(--mono); font-style: normal; color: var(--ink-soft); }
/* experience sheet: the tile itself leads */
.m-xban { display: flex; justify-content: center; margin: 6px 0 10px; }
#mob .m-xban .xp { position: relative; inset: auto; left: auto; top: auto; width: auto; height: auto; }
#mob .m-xban .xpt { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; margin: 0 auto; pointer-events: none; animation: m-ban .6s var(--mo) both; }
@keyframes m-ban { from { transform: scale(.88); opacity: .3; } }
.m-xban + .m-k { margin-top: 30px; }

/* ── first visit: the desktop intro ── */
.m-intro { position: absolute; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--bg); transition: opacity .8s var(--mo), filter .8s var(--mo); }
.m-intro img { width: 248px; height: 248px; border-radius: 50%; object-fit: cover; margin-bottom: 28px; filter: grayscale(1) contrast(1.05);
  box-shadow: 0 0 0 10px var(--bg), 0 0 0 12px var(--line), 0 36px 60px -32px rgb(var(--shadow) / .6); animation: m-rise .9s var(--mo) both; }
.m-intro p { margin: 0; font: 400 84px/1 var(--pixel); color: var(--ink); animation: m-rise .9s var(--mo) .12s both; }
.m-intro p.nm { font-size: 48px; color: var(--ink-soft); animation-delay: .22s; }
.m-intro.out { opacity: 0; filter: blur(14px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) { #mob *, #mob *::before, #mob *::after { transition-duration: .01s !important; animation: none !important; } }
#mob .m-xpw > #xp.m-xp { position: relative; left: auto; top: auto; inset: auto; width: 648px; height: 225px; margin: 0; opacity: 1; transform: none; flex: none; }

/* So far deck: 80%, on the left margin like everything else */
#mob .m-xpw { justify-content: flex-start; height: 232px; }
#mob .m-xpw > #xp.m-xp { transform: scale(1.0309); transform-origin: 0 0; }   /* full content width (668) */

/* playlist v4: the desktop player, one song wide — same disc, type, ghost-blur and soft round buttons */
#mob .m-np { position: relative; display: flex; align-items: center; gap: 24px; height: 96px; margin-top: 8px; color: var(--ink); touch-action: pan-y; }
#mob .m-np__art { position: relative; flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 12px 22px -10px #0009; }
#mob .m-np__img { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9fb8ff, #3b3f8f 55%, #151a3a) center/cover; }
#mob .m-np.is-playing .m-np__img { animation: plspin 6s linear infinite; }
#mob .m-np .plrow__pp { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; border-radius: 50%; background: rgb(0 0 0 / .18); }
#mob .m-np .plrow__pp svg { width: 20px; height: 20px; fill: currentColor; filter: drop-shadow(0 1px 2px #0006); }
#mob .m-np .plrow__pp .i-stop, #mob .m-np.is-playing .plrow__pp .i-play { display: none; }
#mob .m-np.is-playing .plrow__pp .i-stop { display: block; }
#mob .m-np__ring, #mob .m-np__bar, #mob .m-np__ctl > i { display: none; }
#mob .m-np__txt { flex: 1; min-width: 0; position: relative; z-index: 1; }
#mob .m-np__in { display: flex; flex-direction: column; gap: 4px; transition: opacity .22s, filter .22s, transform .22s; }
#mob .m-np__in b { font: 600 27px/1.15 var(--sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mob .m-np__in small { font: 400 18px/1.3 var(--mono); letter-spacing: .02em; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mob .m-np.is-swap .m-np__in { opacity: 0; filter: blur(8px); transform: translateX(calc(var(--dir, 1) * -18px)); }
#mob .m-np.is-in .m-np__in { transition: none; opacity: 0; filter: blur(8px); transform: translateX(calc(var(--dir, 1) * 18px)); }
#mob .m-np__ctl { flex: none; display: inline-flex; gap: 26px; position: relative; z-index: 2; }
#mob .m-np__b { width: 50px; height: 50px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); transition: color .2s, transform .35s var(--spring, ease); }
#mob .m-np__b svg { width: 15px; height: 15px; fill: currentColor; }
#mob .m-np__b:active { transform: scale(.9); color: var(--accent); }
#mob .m-np__nx { display: none; }

/* Peek — the drum turned sideways: the next song waits to the right, grey and blurred like desktop's neighbours */
#mob .m-np[data-v="P"] .m-np__txt { flex: 0 1 auto; max-width: 300px; }
#mob .m-np[data-v="P"] .m-np__nx { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; overflow: hidden; padding: 12px; margin: -12px; opacity: .6; filter: blur(2px); pointer-events: none;
  -webkit-mask: linear-gradient(90deg, #000 30%, transparent 92%); mask: linear-gradient(90deg, #000 30%, transparent 92%); transition: opacity .22s; }
#mob .m-np[data-v="P"] .m-np__nimg { flex: none; width: 50px; height: 50px; border-radius: 50%; background: #9a9a9a center/cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 10px 18px -8px #0007; }
#mob .m-np[data-v="P"] .m-np__nx b { font: 600 22px/1 var(--sans); white-space: nowrap; color: var(--ink-soft); }
#mob .m-np[data-v="P"].is-swap .m-np__nx { opacity: 0; }

/* preview-only variant switch */
.m-npv { display: flex; gap: 6px; margin-top: 12px; font: 500 16px/1 var(--mono); }
.m-npv button { padding: 6px 12px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-soft); font: inherit; }
.m-npv button.is-on { background: var(--ink); color: var(--nav); }
#mob .m-np .plrow__pp { opacity: 1 !important; transform: none !important; width: auto !important; height: auto !important; }

/* spacing pass: one rhythm — 56 between sections, 20 label→content, wider side margins */
#mob .mv { padding-left: 56px; padding-right: 56px; padding-bottom: 178px; }
#mob .mv-about { padding-top: 88px; }
#mob .m-rule { margin: 40px -56px 0; }
#mob .m-chat { margin-top: 48px; }
#mob .m-sh { margin-top: 56px; }
#mob .m-np { margin-top: 16px; }
#mob .m-xpw { margin-top: 24px; }
#mob .m-story { margin-top: 56px; }
/* breathing room between buttons */
#mob .m-nav { width: 496px; }
#mob .m-np__ctl { gap: 40px; }
/* story: desktop glass frame + readable caption */
#mob .m-glass { position: absolute; z-index: 3; left: 22px; top: 22px; pointer-events: none; overflow: visible; }
#mob .m-sl::after { background: linear-gradient(#0000 30%, #0006 62%, #000d); }
#mob .m-sl p { left: 52px; right: 52px; bottom: 48px; font-weight: 450; text-shadow: 0 1px 2px #0007, 0 2px 18px #0008; }
/* caption legibility on every photo: progressive blur + deeper scrim under the text, smaller type */
#mob .m-sl::before { content: ""; position: absolute; inset: 0; z-index: 1; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask: linear-gradient(#0000 38%, #000c 70%, #000); mask: linear-gradient(#0000 38%, #000c 70%, #000); }
#mob .m-sl::after { z-index: 1; background: linear-gradient(#0000 28%, #0007 58%, #000e); }
#mob .m-sl p { font-size: 22px; line-height: 32px; font-weight: 400; left: 50px; right: 50px; bottom: 46px; }
/* calmer motion on phone: no slow zoom on the story photos */
#mob .m-sl img, #mob .m-sl.on img { transform: none; transition: none; }
#mob .pv-chat .pc-a { min-height: 192px; }   /* sized to the longest short answer (4 lines) */
/* attention order: header social buttons as quiet as the round mail/theme buttons */
#mob .m-soc .social { border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent) !important; color: var(--ink) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent) !important; }
#mob .m-soc .social svg { width: 22px; fill: currentColor; }

/* now-playing bar — docked on top of the nav, same width and axis; part of the app chrome, not the content */
#mob .mv-about { padding-bottom: 268px; }
#mob .m-bar { position: absolute; z-index: 30; left: 50%; bottom: 145px; width: 496px; transform: translateX(-50%); border-radius: 40px;
  background: color-mix(in srgb, var(--nav) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 var(--surface-hi), 0 0 0 1px var(--line), 0 16px 30px -20px rgb(var(--shadow) / .5);
  transition: opacity .35s var(--mo), transform .5s var(--mo), filter .35s var(--mo); }
#mob:has(.mv-work.is-on) .m-bar { opacity: 0; transform: translateX(-50%) translateY(16px); filter: blur(6px); pointer-events: none; }
#mob .m-bar .m-np { height: 72px; margin: 0; padding: 0 10px 0 8px; gap: 16px; }
#mob .m-bar .m-np__art { width: 56px; height: 56px; }
#mob .m-bar .m-np__txt { cursor: pointer; }
#mob .m-bar .m-np__in { gap: 2px; }
#mob .m-bar .m-np__in b { font-size: 22px; }
#mob .m-bar .m-np__in small { font-size: 16px; }
#mob .m-bar .m-np__ctl { gap: 10px; }
#mob .m-bar .m-np__b { width: 46px; height: 46px; }
#mob .m-bar .m-np__b svg { width: 14px; height: 14px; }
/* player card — its own capsule above the nav (semicircle ends), deliberately quieter than the nav:
   lighter glass, no drop shadow, smaller type, ghost controls */
#mob .m-bar { bottom: 137px; width: 400px; height: 62px; border-radius: 31px;
  background: color-mix(in srgb, var(--nav) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-hi, #fff) 60%, transparent), 0 0 0 1px var(--line); }
#mob .m-bar .m-np { height: 62px; padding: 0 8px 0 7px; gap: 14px; }
#mob .m-bar .m-np__art { width: 48px; height: 48px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
#mob .m-bar .plrow__pp svg { width: 16px; height: 16px; }
#mob .m-bar .m-np__in { gap: 3px; }
#mob .m-bar .m-np__in b { font: 500 19px/1.1 var(--sans); color: color-mix(in srgb, var(--ink) 82%, transparent); letter-spacing: 0; }
#mob .m-bar .m-np__in small { font-size: 14px; }
#mob .m-bar .m-np__ctl { gap: 2px; }
#mob .m-bar .m-np__b { width: 44px; height: 44px; background: none; box-shadow: none; color: var(--ink-soft); }
#mob .m-bar .m-np__b svg { width: 13px; height: 13px; }
#mob .mv-about { padding-bottom: 236px; }

/* header actions: Connect (menu: Email / X / LinkedIn) + appearance toggle — replaces the socials and the bottom round buttons */
#mob .m-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
#mob .m-con { position: relative; }
#mob .m-con__btn, #mob .m-mode { height: 52px; border: 0; cursor: pointer; color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); transition: transform .4s var(--mo), background .25s; }
#mob .m-con__btn { display: flex; align-items: center; gap: 8px; padding: 0 18px 0 22px; border-radius: 26px; font: 500 19px/1 var(--mono); letter-spacing: -.01em; }
#mob .m-con__btn svg { width: 14px; height: 14px; transition: transform .35s var(--mo); }
#mob .m-con.is-open .m-con__btn svg { transform: rotate(180deg); }
#mob .m-mode { width: 52px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
#mob .m-mode svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-mode="dark"] #mob .m-mode .i-moon, html:not([data-mode="dark"]) #mob .m-mode .i-sun { display: none; }
#mob .m-con__btn:active, #mob .m-mode:active { transform: scale(.94); }
#mob .m-con__menu { position: absolute; z-index: 60; top: calc(100% + 12px); right: 0; min-width: 230px; padding: 8px; border-radius: 26px; background: var(--nav);
  box-shadow: inset 0 1px 0 var(--surface-hi, #fff), 0 0 0 1px var(--line), 0 24px 44px -18px rgb(var(--shadow) / .55);
  opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right; filter: blur(4px); pointer-events: none;
  transition: opacity .25s var(--mo), transform .35s var(--mo), filter .25s var(--mo); }
#mob .m-con.is-open .m-con__menu { opacity: 1; transform: none; filter: none; pointer-events: auto; }
#mob .m-con__menu a { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 18px; font: 500 22px/1 var(--sans); color: var(--ink); text-decoration: none; }
#mob .m-con__menu a:active { background: color-mix(in srgb, var(--ink) 7%, transparent); }
#mob .m-con__menu i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 7%, transparent); }
#mob .m-con__menu i svg { width: 18px; height: 18px; fill: currentColor; }
#mob .m-con__menu a:first-child i svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
#mob .m-hdr { position: relative; z-index: 20; }
#mob .m-tt { font-size: 41px; }   /* longest role ("AI Creative Technologist") now clears the Connect + appearance buttons */
/* header: identity + actions in ONE row, actions compact and centred on the avatar */
#mob .m-hdr { gap: 20px; }
#mob .m-av { width: 80px; height: 80px; }
#mob .m-tt { font-size: 44px; }
#mob .m-acts { margin-left: auto; gap: 8px; }
#mob .m-con__btn, #mob .m-mode { height: 44px; }
#mob .m-mode { width: 44px; }
#mob .m-mode svg { width: 20px; height: 20px; }
#mob .m-con__btn { font-size: 17px; gap: 6px; padding: 0 14px 0 18px; }
#mob .m-con__btn svg { width: 12px; height: 12px; }
/* identity 10% smaller so it breathes next to Connect + appearance */
#mob .m-av { width: 72px; height: 72px; }
#mob .m-hdr { gap: 18px; }
#mob .m-nm { font-size: 20px; }
#mob .m-tt { font-size: 40px; margin-top: 6px; }

/* player = "my work playlist" sticker on the story card (Instagram-story music sticker); the nav stands alone */
#mob .mv-about { padding-bottom: 178px; }
#mob .m-bar.m-bar--sticker { position: absolute; z-index: 5; left: 44px; top: 44px; right: auto; bottom: auto; width: auto; max-width: calc(100% - 88px); height: auto; transform: none;
  border-radius: 30px; background: rgb(14 14 16 / .42); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 0 0 1px rgb(255 255 255 / .12), 0 10px 24px -14px #000a; opacity: 1; filter: none; }
#mob .m-bar--sticker .m-np { height: auto; padding: 7px 8px 7px 7px; gap: 12px; color: #fff; }
#mob .m-bar--sticker .m-np__art { width: 50px; height: 50px; box-shadow: 0 0 0 1px rgb(255 255 255 / .2); }
#mob .m-bar--sticker .m-np__txt { flex: 0 1 auto; max-width: 250px; }
#mob .m-bar--sticker .m-np__in { gap: 3px; }
#mob .m-bar--sticker .m-np__k { display: flex; align-items: center; gap: 7px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: rgb(255 255 255 / .7); white-space: nowrap; }
#mob .m-bar--sticker .m-np__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
#mob .m-bar--sticker .m-np__in b { font: 600 18px/1.15 var(--sans); color: #fff; letter-spacing: 0; }
#mob .m-bar--sticker .m-np__in small { font-size: 13px; color: rgb(255 255 255 / .62); }
#mob .m-bar--sticker .m-np__ctl { gap: 0; margin-left: 4px; }
#mob .m-bar--sticker .m-np__b { width: 38px; height: 38px; background: none; box-shadow: none; color: rgb(255 255 255 / .85); }
#mob .m-bar--sticker .m-np__b svg { width: 12px; height: 12px; }
#mob .m-bar--sticker .plrow__pp svg { width: 16px; height: 16px; }
/* sticker v2: "Go to playlist" eyebrow (link) → song title → artist, with room between rows */
#mob .m-bar--sticker .m-np { padding: 11px 12px 11px 11px; gap: 14px; }
#mob .m-bar--sticker .m-np__art { width: 56px; height: 56px; }
#mob .m-bar--sticker .m-np__in { gap: 5px; }
#mob .m-bar--sticker .m-np__k { text-decoration: none; color: rgb(255 255 255 / .72); margin-bottom: 2px; }
#mob .m-bar--sticker .m-np__k svg { width: 11px; height: 11px; color: var(--accent); margin-left: -2px; }
#mob .m-bar--sticker .m-np__k::before { display: none; }
#mob .m-bar--sticker .m-np__in b { font-size: 19px; }
#mob .m-bar--sticker .m-np__in small { font-size: 14px; }
#mob .m-bar--sticker .m-np__ctl { margin-left: 10px; }
/* Work, lighter: the long "challenge" paragraph lives only in Details; the page is tag → title → one short line → film */
#mob .w-p { display: none; }
#mob .w-d { -webkit-line-clamp: 2; }
#mob .w-pl { margin-top: 44px; }
#mob .w-det { margin-top: 48px; }
#mob .mv-work { padding-top: 96px; }
#mob .mv-work .w-top { margin-top: auto; }   /* free space splits evenly above the film block and above the strip */
/* Details, hinted: the same grab handle the sheet uses + a quiet label — reads as "pull up for the story" */
#mob .w-det { gap: 14px; padding: 14px 48px 10px; margin-top: 40px; }
#mob .w-det .rail { display: none; }
#mob .w-det::before { content: ""; width: 72px; height: 8px; border-radius: 8px; background: var(--ink-soft); opacity: .45; transition: opacity .25s, transform .4s var(--mo); }
#mob .w-det .lb { display: flex; align-items: center; gap: 10px; font-size: 18px; }
#mob .w-det .lb::after { content: ""; width: 9px; height: 9px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(3px) rotate(45deg); opacity: .7; }
#mob .w-det:active::before { opacity: .8; transform: translateY(-4px); }
/* film strip — the desktop stack, horizontal: active first on the left margin in full colour, the rest step down in size,
   go greyscale and soften with distance, and the order loops (after the last film comes the first) */
#mob .w-strip { margin: auto -56px 0 0; padding: 0; height: 160px; gap: 18px; overflow: hidden; justify-content: flex-start; align-items: center; }
#mob .w-c { --d: 4; width: calc(220px - min(var(--d), 3) * 26px); border-radius: calc(20px - min(var(--d), 3) * 3px);
  filter: grayscale(calc(min(var(--d), 1))) blur(calc(var(--d) * .7px)); opacity: calc(1 - var(--d) * .14);
  box-shadow: 0 0 0 1px #0000000d, 0 12px 22px -14px rgb(var(--shadow) / .5); transition: width .55s var(--mo), filter .45s var(--mo), opacity .45s var(--mo), border-radius .45s; }
#mob .w-c.on { filter: none; opacity: 1; box-shadow: 0 0 0 1px var(--line), 0 14px 26px -14px rgb(var(--shadow) / .55); }
#mob .w-strip.is-roll .w-c { animation: wroll .5s var(--mo); }
@keyframes wroll { from { transform: translateX(26px); filter: blur(4px) grayscale(1); opacity: .4; } }
/* Details as a hinted block: a quiet card that peeks the story (2 lines, fading out) — tap opens the full sheet */
#mob .w-det { width: 100%; margin: 40px 0 0; padding: 14px 32px 26px; align-items: stretch; gap: 12px; text-align: left; border-radius: 36px;
  background: color-mix(in srgb, var(--nav) 60%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-hi, #fff) 60%, transparent), 0 0 0 1px var(--line); }
#mob .w-det::before { align-self: center; width: 64px; height: 7px; }
#mob .w-det .lb { font-size: 16px; justify-content: space-between; }
#mob .w-det .tz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 24px/36px var(--sans);
  color: color-mix(in srgb, var(--ink) 62%, transparent); -webkit-mask: linear-gradient(#000 45%, transparent); mask: linear-gradient(#000 45%, transparent); }
/* Work v4 — film + switcher read as one unit; details is a quiet text link; tag is a quiet label */
#mob .mv-work { padding-top: 120px; }
#mob .mv-work .w-top { margin-top: 0; order: 1; } #mob .w-t { order: 2; } #mob .w-d { order: 3; display: none; }
#mob .w-pl { order: 4; margin-top: 40px; } #mob .w-det { order: 5; } #mob .w-strip { order: 6; margin-top: 30px; }
#mob .w-tag { background: none !important; color: var(--ink-soft) !important; padding: 0 !important; font: 500 18px/1 var(--mono) !important; letter-spacing: .08em;
  display: inline-flex !important; align-items: center; gap: 10px; box-shadow: none !important; }
#mob .w-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
#mob .w-t { margin-top: 18px; }
#mob .w-det { width: 100%; margin: 26px 0 0; padding: 4px 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left;
  background: none; box-shadow: none; border-radius: 0; }
#mob .w-det::before { display: none; }
#mob .w-det .lb { justify-content: flex-start; font-size: 17px; color: var(--ink-soft); }
#mob .w-det .tz { -webkit-line-clamp: 1; font: 400 24px/34px var(--sans); color: color-mix(in srgb, var(--ink) 62%, transparent);
  -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent); }
/* Work v4b — anchor the block: centre film+details+strip in the space above the nav */
#mob .mv-work { padding-top: 96px; }
#mob .mv-work .w-top { margin-top: auto; }
#mob .mv-work .w-strip { margin-bottom: auto; }
#mob .mv.mv-work { padding-bottom: 238px; } /* optical centre: sit slightly above middle */
#mob .m-sheet .feature__tag2 { background:none!important; color:var(--ink-soft)!important; padding:0!important; font:500 18px/1 var(--mono)!important; letter-spacing:.08em; display:inline-flex!important; align-items:center; gap:10px; box-shadow:none!important; }
#mob .m-sheet .feature__tag2::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
/* Work v5 — Details as a proper hinted card (desktop surface language); strip sits at the bottom */
#mob .mv.mv-work { padding-top: 120px; padding-bottom: 222px; }
#mob .mv-work .w-top { margin-top: 0; }
#mob .mv-work .w-strip { margin-top: auto; margin-bottom: 0; }
#mob .w-det { width: 100%; margin: 32px 0 40px; padding: 26px 30px 28px; gap: 14px; border-radius: 36px; text-align: left;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: inset 0 1.5px 0 var(--surface-hi), 0 0 0 1px var(--line), 0 24px 40px -28px rgb(var(--shadow) / .5);
  transition: transform .25s var(--mo); }
#mob .w-det:active { transform: scale(.985); }
#mob .w-det::before { display: none; }
#mob .w-det .hd { display: flex; align-items: center; justify-content: space-between; }
#mob .w-det .lb { font: 500 17px/1 var(--mono); letter-spacing: .08em; color: var(--surface-dim); }
#mob .w-det .lb::after { display: none; }
#mob .w-det .go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--surface-ink);
  background: var(--surface-hi); box-shadow: 0 0 0 1px var(--line), 0 6px 12px -8px rgb(var(--shadow) / .5); }
#mob .w-det .tz { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; mask: none;
  font: 400 26px/38px var(--sans); color: color-mix(in srgb, var(--surface-ink) 82%, transparent); text-wrap: pretty; }
#mob .w-det .rl { font: 500 15px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--surface-dim);
  white-space: nowrap; overflow: hidden; mask: linear-gradient(90deg, #000 80%, transparent); }
#mob .w-det .rl:empty { display: none; }
/* Work v5b — Details card toned down: hairline + faint fill, no lift, quieter type */
#mob .w-det { padding: 22px 26px 24px; gap: 10px; border-radius: 30px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  box-shadow: inset 0 0 0 1px var(--line); }
#mob .w-det .lb { font-size: 15px; }
#mob .w-det .go { width: 34px; height: 34px; background: none; box-shadow: none; color: var(--ink-soft); }
#mob .w-det .go svg { width: 18px; height: 18px; }
#mob .w-det .tz { font: 400 23px/34px var(--sans); color: color-mix(in srgb, var(--ink) 66%, transparent); }
#mob .w-det .rl { font-size: 13px; opacity: .8; }
/* Work v6 — Details as an inline dropdown (accordion). Header row + chevron; panel expands in place */
#mob .w-det { display: block; padding: 0; gap: 0; border-radius: 30px; overflow: hidden; cursor: default;
  background: color-mix(in srgb, var(--ink) 3%, transparent); box-shadow: inset 0 0 0 1px var(--line); transform: none!important; }
#mob .w-det .hd { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 0 28px; height: 84px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#mob .w-det .lb { font: 500 17px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
#mob .w-det .go { width: 40px; height: 40px; color: var(--ink-soft); transition: transform .45s var(--mo); }
#mob .w-det.open .go { transform: rotate(180deg); }
#mob .w-det .go svg { width: 22px; height: 22px; }
#mob .w-det .bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--mo); }
#mob .w-det.open .bd { grid-template-rows: 1fr; }
#mob .w-det .in { overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 0 28px; opacity: 0; transition: opacity .3s, padding .5s var(--mo); }
#mob .w-det.open .in { padding: 4px 28px 28px; opacity: 1; transition-delay: .08s; border-top: 1px solid var(--line); padding-top: 24px; }
#mob .w-det .tz { display: block; -webkit-line-clamp: unset; overflow: visible; mask: none; font: 400 23px/35px var(--sans); color: color-mix(in srgb, var(--ink) 72%, transparent); }
#mob .w-det .rl { font: 500 13px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); white-space: normal; mask: none; opacity: 1; }
#mob .w-det .more { all: unset; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 15px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding: 6px 0; }
#mob .w-det .more svg { color: var(--accent); }
#mob .w-det .go svg { width: 30px; height: 30px; stroke-width: 2; }
#mob .w-det .rl { font-size: 15px; }
#mob .w-det .more { font-size: 16px; }
#mob .w-det svg, #mob .w-det svg path { fill: none !important; }
/* Work v6b — film block centred in the page; strip stays pinned above the nav */
#mob .mv.mv-work { padding-top: 360px; } /* puts the film block on the page centre line */
#mob .mv-work .w-top { margin-top: auto; }
#mob .mv-work .w-det { margin-bottom: auto; }
#mob .mv-work .w-strip { margin-top: 0; }
#mob .mv-work .w-top, #mob .mv-work .w-strip { transition: margin .5s var(--mo); }
/* Work v6c — disclosure, not a field: no box; label + chevron inline; opened content hangs off a thin rail (desktop rail cue) */
#mob .mv.mv-work { padding-top: 170px; }
#mob .w-det { background: none; box-shadow: none; border-radius: 0; overflow: visible; margin: 30px 0 0; }
#mob .w-det .hd { width: auto; display: inline-flex; justify-content: flex-start; gap: 6px; height: 56px; padding: 0 12px 0 0; }
#mob .w-det .lb { color: var(--ink-soft); }
#mob .w-det .go { width: 30px; height: 30px; }
#mob .w-det .go svg { width: 24px; height: 24px; }
#mob .w-det.open .lb, #mob .w-det.open .go { color: var(--ink); }
#mob .w-det .in, #mob .w-det.open .in { border-top: 0; padding-left: 26px; padding-right: 0; position: relative; }
#mob .w-det.open .in { padding-top: 10px; padding-bottom: 6px; }
#mob .w-det .in::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--accent) 0 48px, var(--line) 48px); }
/* Work v6d — not a dropdown: details always shown as a quiet hint on the rail; tap anywhere opens the full sheet */
#mob .w-det .go { display: none; }
#mob .w-det .hd { height: 44px; pointer-events: auto; }
#mob .w-det .bd { grid-template-rows: 1fr; }
#mob .w-det .in { opacity: 1; padding: 6px 0 4px 26px; gap: 14px; }
#mob .w-det .tz { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; cursor: pointer;
  font: 400 23px/35px var(--sans); color: color-mix(in srgb, var(--ink) 66%, transparent); }
#mob .w-det .rl { display: none; }
/* Work v6f — the sheet opener reads as "opens here": small outlined pill, up-chevron (sheet rises), legible ink */
#mob .w-det .more { margin-top: 4px; height: 52px; padding: 0 22px 0 24px; gap: 10px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line); font: 500 16px/1 var(--mono); letter-spacing: .06em; color: var(--ink); }
#mob .w-det .more svg { width: 20px; height: 20px; color: var(--ink); fill: none !important; }
#mob .w-det .more:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* Work v7 — the strip IS the desktop stack (#rolodex), turned horizontal. Cards placed per frame by mobile.js */
#mob .w-strip { position: relative; display: block; margin-left: -56px; margin-right: -56px; height: 190px; overflow: hidden; padding: 0; gap: 0; }
#mob .w-c { position: absolute; left: 0; top: 50%; margin: 0; padding: 0; border: 0; overflow: hidden; aspect-ratio: auto;
  border-radius: 14px; background: var(--surface-2); filter: none !important; animation: none !important; box-shadow: none !important;
  transition: opacity .3s var(--mo), border-radius .5s var(--mo); will-change: transform; -webkit-tap-highlight-color: transparent; }
#mob .w-c.is-focus { border-radius: 20px; box-shadow: 0 0 0 1px #0000000d, 0 14px 28px -16px #0005 !important; }
:root[data-mode="dark"] #mob .w-c.is-focus { box-shadow: 0 0 0 1px #ffffff14, 0 14px 30px -14px #000a !important; }
#mob .w-c img { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); object-fit: cover;
  filter: grayscale(1) brightness(.93) contrast(.94) blur(var(--dof, 0px)); transition: filter .35s ease-out; }
:root[data-mode="dark"] #mob .w-c img { filter: grayscale(1) brightness(.6) contrast(1.05) blur(var(--dof, 0px)); }
#mob .w-c.is-focus img, :root[data-mode="dark"] #mob .w-c.is-focus img { filter: saturate(.9) brightness(.92); }
#mob .w-c.is-picked img { animation: rcard-pick .9s cubic-bezier(.22,1,.36,1); }
/* ═══ Final consistency pass ═══ */
/* header buttons = desktop header buttons (tonal fill + hairline edge, 12px corners; theme toggle stays a circle) */
#mob .m-con__btn { border-radius: 12px; background: var(--b-tonal); box-shadow: var(--b-edge); }
#mob .m-mode { background: var(--b-tonal); box-shadow: var(--b-edge); }
#mob .m-con__menu { border-radius: 24px; }
#mob .m-con__menu a { border-radius: 16px; }
/* one label size for every mono eyebrow (So far · tag · Details · My role · sheet tag) */
#mob .m-sh, #mob .w-det .lb, #mob .m-k { font-size: 18px !important; letter-spacing: .08em; }
#mob .w-tag, #mob .m-sheet .feature__tag2 { font-size: 18px !important; }
/* sheet shares the page gutter (56) and the work title size (64) */
#mob .m-sheet .body { padding-left: 56px; padding-right: 56px; }
#mob .m-sheet .m-dt { font-size: 64px; }
/* bottom rhythm: last block ends the same distance above the nav on both pages (~80 canvas) */
#mob .mv.mv-about { padding-bottom: 200px; }
#mob .mv.mv-work { padding-bottom: 170px; }
/* sticker and caption share one inner margin inside the story card (50 from the card edge) */
#mob .m-bar.m-bar--sticker { left: 50px; top: 50px; }
/* sticker tucked into the story card's top-left corner like a tag (just inside the glass frame) */
#mob .m-bar.m-bar--sticker { left: 36px; top: 36px; }
#mob .m-bar--sticker .m-np { padding: 9px 10px 9px 9px; gap: 12px; }
#mob .m-bar--sticker .m-np__art { width: 50px; height: 50px; }
#mob .mv.mv-work { padding-bottom: 214px; }   /* strip lifted a touch off the nav */
#mob .mv.mv-work { padding-bottom: 258px; }
/* Work v8 — the strip belongs to the film (as on desktop, where the stack is centred on the film):
   one module — tag · title · film · Details · strip — centred as a unit; the strip sits one section-gap under Details */
#mob .mv.mv-work { padding-top: 120px; padding-bottom: 170px; }
#mob .mv-work .w-top { margin-top: auto; }
#mob .mv-work .w-det { margin-bottom: 0; }
#mob .mv-work .w-strip { margin-top: 64px; margin-bottom: auto; }
/* header actions: real separation between Connect and the theme toggle (12px on phone), plus invisible ~44px tap areas */
#mob .m-acts { gap: 24px; }
#mob .m-con__btn, #mob .m-mode { position: relative; }
#mob .m-con__btn::after, #mob .m-mode::after { content: ""; position: absolute; inset: -22px -10px; }
#mob .m-mode { right: auto; left: auto; top: auto; bottom: auto; }
/* ═══ Details sheet — desktop Details hierarchy, stacked for phone ═══
   title → hairline (content width) → lead (ink) → story (68% ink, smaller) → MY ROLE → quiet chips → shots → Tools */
#mob .m-sheet .m-dt { margin-top: 18px; font-size: 56px; line-height: 1.05; text-wrap: balance; }
#mob .m-sheet .m-rule, #mob .m-sheet .m-rule--in { margin: 40px 0 44px; border-top: 1px solid var(--line); }
#mob .m-sheet .m-lead { font: 400 32px/46px var(--sans); letter-spacing: -.005em; color: var(--ink); text-wrap: pretty; }
#mob .m-sheet .m-p { margin-top: 24px; font: 400 26px/40px var(--sans); color: color-mix(in srgb, var(--ink) 68%, transparent); text-wrap: pretty; }
#mob .m-sheet .m-k { margin: 52px 0 18px; }
#mob .m-sheet .m-chips { display: flex; flex-wrap: wrap; gap: 12px; }
#mob .m-sheet .m-chips span { margin: 0; padding: 12px 18px; border-radius: 99px; font: 500 22px/1 var(--sans); color: var(--ink);
  background: var(--b-tonal); box-shadow: var(--b-edge); border: 0; }
#mob .m-sheet .m-shots { margin-top: 52px; gap: 16px; }
#mob .m-sheet .m-shots img { border-radius: 24px; }
#mob .m-sheet .m-shots img:first-child { border-radius: 44px; }
#mob .m-sheet .m-shots + .m-rule, #mob .m-sheet .m-shots ~ .m-rule--in { margin-top: 56px; }
#mob .m-sheet .m-th { margin: 0 0 30px; font-size: 40px; }
#mob .m-sheet .body { padding-bottom: 140px; }
/* titles: client/project name on one line; the part after the dash moves into the eyebrow (AI FILM · PRODUCT LAUNCH) */
#mob .w-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mob .m-sheet .m-dt { text-wrap: balance; }
#mob .m-sheet .m-dt .t-sub { color: var(--ink-soft); }
#mob .m-sheet .m-dt .t-sub { display: block; }
/* hierarchy: eyebrow hugs the title (one heading unit); the film gets a clear section gap below it */
#mob .mv-work .w-t { margin-top: 6px; }
#mob .mv-work .w-pl { margin-top: 60px; }
/* memory: only the showing (and just-left) story is rendered; others are hidden so their blur layers are never kept */
#mob .m-sl:not(.on):not(.was) { visibility: hidden; }
#mob .m-sl:not(.on):not(.was)::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
#mob img.m-glass { display: block; }
/* entrance animations don't leave a filter on the blocks afterwards (a lingering filter forces extra offscreen layers on iOS) */
#mob .mv.is-enter > * { animation-fill-mode: backwards; }
/* ═══ Real-phone pass: fill the screen at true size, bigger tap targets, readable small text ═══ */
.m-cv { width: var(--mw, 780px); height: var(--mh, 1688px); }
html.m, html.m body { background: var(--bg); }
#mob .mv { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
#mob .mv::-webkit-scrollbar { display: none; }
#mob .mv:not(.is-on) { pointer-events: none; }
/* tap targets (canvas px; ×0.5 on a phone): 44pt-class hit areas */
#mob .m-con__btn, #mob .m-mode { height: 72px; }
#mob .m-mode { width: 72px; }
#mob .m-mode svg { width: 28px; height: 28px; }
#mob .m-con__btn { padding: 0 22px 0 26px; font-size: 24px; border-radius: 18px; gap: 10px; }
#mob .m-con__btn svg { width: 16px; height: 16px; }
#mob .m-acts { gap: 20px; }
#mob .m-con__menu { min-width: 300px; }
#mob .m-con__menu a { padding: 22px 20px; font-size: 28px; }
#mob .pc-q { height: auto !important; }
#mob .pc-q .pc-chip, #mob .pc-chip { min-height: 64px; padding: 0 22px !important; font-size: 24px !important; }
#mob .m-nav { width: 560px; height: 96px; bottom: 40px; }
#mob .m-nav a { font-size: 30px; }
#mob .m-bar--sticker .m-np__b { width: 64px; height: 64px; }
#mob .m-bar--sticker .m-np__b svg { width: 16px; height: 16px; }
#mob .m-bar--sticker .m-np__art { width: 64px; height: 64px; }
#mob .m-bar--sticker .m-np__k { font-size: 16px; }
#mob .m-bar--sticker .m-np__in b { font-size: 24px; }
#mob .m-bar--sticker .m-np__in small { font-size: 18px; }
#mob .w-det .more { height: 76px; padding: 0 30px 0 32px; font-size: 22px; }
#mob .w-det .lb { font-size: 22px !important; }
#mob .w-det .tz { font-size: 28px; line-height: 42px; }
#mob .w-snd, #mob .w-fs { width: 72px !important; height: 72px !important; }
/* small mono labels: 9px → 11px on the phone */
#mob .m-sh, #mob .m-k, #mob .w-tag, #mob .m-sheet .feature__tag2 { font-size: 22px !important; }
/* press feedback on everything tappable */
#mob button, #mob a, #mob .m-story, #mob .w-c, #mob .pc-chip { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#mob button:active, #mob .m-nav a:active, #mob .pc-chip:active, #mob .m-con__menu a:active { transform: scale(.95); opacity: .8; transition: transform .1s, opacity .1s; }
#mob .m-story:active { transform: scale(.99); transition: transform .15s; }
/* play: the film waits for a tap on phones */
#mob .w-play { position: absolute; z-index: 3; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgb(20 20 22 / .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35), 0 16px 30px -14px #000a; transition: opacity .3s, transform .3s; }
#mob .w-play svg { width: 44px; height: 44px; margin-left: 6px; }
#mob .w-pl.is-playing .w-play { opacity: 0; transform: scale(.8); pointer-events: none; }
/* header fits next to Connect + toggle on every phone */
#mob .m-id { min-width: 0; flex: 1 1 auto; }
#mob .m-av { width: 64px !important; height: 64px !important; flex: none; }
#mob .m-nm { font-size: 18px !important; }
#mob .m-tt { font-size: 34px !important; height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mob .m-hdr { gap: 14px; }
/* question chips: one swipeable row with a soft edge, never clipped mid-word */
#mob .pv-chat .pc-q { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: none !important; width: auto !important;
  -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
#mob .pv-chat .pc-q::-webkit-scrollbar { display: none; }
#mob .pv-chat .pc-chip { flex: none; min-height: 60px; font-size: 22px !important; padding: 0 20px !important; }
/* short screens (small phones, Safari with toolbars): content scrolls instead of squashing under the nav */
#mob .m-story { min-height: 420px; }
#mob.m-short .mv.mv-work { padding-top: 70px; }
#mob.m-short .mv-work .w-top { margin-top: 0; }
#mob.m-short .mv-work .w-strip { margin-bottom: 0; margin-top: 44px; }
/* short screens: tighten rhythm so each page still fits; anything left scrolls under a soft fade above the nav */
#mob .m-story { min-height: 300px; }
#mob.m-short .mv.mv-about { padding-top: 56px; padding-bottom: 170px; }
#mob.m-short .m-rule { margin-top: 28px; }
#mob.m-short .pv-chat { margin-top: 28px !important; }
#mob.m-short .pv-chat .pc-a { min-height: 0 !important; }
#mob.m-short .m-sh { margin-top: 36px; }
#mob.m-short .m-story { margin-top: 36px; }
#mob.m-short .mv.mv-work { padding-top: 56px; padding-bottom: 170px; }
#mob.m-short .mv-work .w-pl { margin-top: 36px; }
#mob.m-short .mv-work .w-det { margin-top: 20px; }
#mob.m-short .mv-work .w-det .tz { -webkit-line-clamp: 1; }
#mob.m-short .mv-work .w-strip { margin-top: 24px; height: 170px; }
#mob .m-cv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 25; pointer-events: none;
  background: linear-gradient(transparent, var(--bg) 70%); }
/* stacking: the film stack's per-card z-index stays inside the strip; sheet always on top */
#mob .w-strip { isolation: isolate; }
#mob .m-dim { z-index: 190 !important; }
#mob .m-sheet { z-index: 200 !important; }
/* nav: same full-pill curvature as desktop (radius = half height), knob too */
#mob .m-nav, #mob .m-nav .kn { border-radius: 999px; }
/* header in proportion with the page: bigger identity, buttons a touch smaller */
#mob .m-av { width: 84px !important; height: 84px !important; }
#mob .m-nm { font-size: 21px !important; }
#mob .m-tt { font-size: 38px !important; height: 46px; margin-top: 4px; }
#mob .m-hdr { gap: 16px; }
#mob .m-acts { gap: 14px; }
#mob .m-con__btn, #mob .m-mode { height: 64px; }
#mob .m-mode { width: 64px; }
#mob .m-mode svg { width: 26px; height: 26px; }
#mob .m-con__btn { font-size: 22px; padding: 0 18px 0 22px; border-radius: 16px; }
#mob .m-tt { font-size: 35px !important; }
#mob .m-acts { gap: 12px; }
/* Work on shorter phones: keep the film module optically centred (a touch above middle), never top-anchored */
#mob.m-short .mv.mv-work { padding-top: 40px; padding-bottom: 210px; }
#mob.m-short .mv-work .w-top { margin-top: auto; }
#mob.m-short .mv-work .w-strip { margin-bottom: auto; }
#mob .mv.mv-work { padding-bottom: 210px; }
#mob .mv.mv-work { padding-top: 70px; }
#mob.m-short .mv.mv-work { padding-top: 40px; }
/* ═══ About: breathing room. Same content, but sections get real air and the page scrolls naturally
   instead of squeezing four blocks into one screen. The story card keeps a fixed, generous size and
   peeks above the nav on first view, inviting the scroll. ═══ */
#mob .mv.mv-about, #mob.m-short .mv.mv-about { padding-top: 72px; padding-bottom: 240px; }
#mob .mv-about .m-rule, #mob.m-short .mv-about .m-rule { margin-top: 44px; }
#mob .mv-about .pv-chat, #mob.m-short .mv-about .pv-chat { margin-top: 56px !important; }
#mob .mv-about .pv-chat .pc-a { min-height: 0 !important; }
#mob .mv-about .m-sh, #mob.m-short .mv-about .m-sh { margin-top: 88px; }
#mob .mv-about .m-xpw { margin-top: 32px; }
#mob .mv-about .m-story, #mob.m-short .mv-about .m-story { flex: none; height: 820px; min-height: 0; margin-top: 88px; }
/* story: shorter card; caption always crisp on iOS (no backdrop blur layer behind the text: WebKit can paint it over the caption) */
#mob .mv-about .m-story, #mob.m-short .mv-about .m-story { height: 620px; }
#mob .m-sl::before, #mob .m-sl.on::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: none; }
#mob .m-sl::after { background: linear-gradient(#0000 40%, #0008 70%, #000d) !important; }
#mob .m-sl p { z-index: 4 !important; color: #fff; }
/* header title: bigger, in proportion with the page (desktop ratio title ≈ 1.5× body). Buttons a little more compact to give
   the title the row; the size is set by the container so the longest title ("AI Creative Technologist") always fits on one line */
#mob .m-av { width: 76px !important; height: 76px !important; }
#mob .m-hdr { gap: 14px; }
#mob .m-acts { gap: 10px; }
#mob .m-con__btn { height: 60px; font-size: 21px; padding: 0 14px 0 18px; gap: 8px; }
#mob .m-mode { width: 60px; height: 60px; }
#mob .m-id { container-type: inline-size; }
#mob .m-nm { font-size: 22px !important; }
#mob .m-tt { font-size: min(46px, 11.6cqi) !important; height: auto; line-height: 1.1; margin-top: 4px; }
/* iOS memory: no blur filters on phones (each blurred element is an extra offscreen buffer in WebKit) */
#mob .mv, #mob .mv.is-on { filter: none !important; }
#mob .mv.is-enter > * { animation-name: m-rise-lite !important; }
@keyframes m-rise-lite { from { opacity: 0; transform: translateY(30px); } }
#mob .pc-w, #mob .pc-a span { filter: none !important; }
#mob .w-c img, :root[data-mode="dark"] #mob .w-c img { filter: grayscale(1) brightness(.93) contrast(.94) !important; }
:root[data-mode="dark"] #mob .w-c img { filter: grayscale(1) brightness(.6) !important; }
#mob .w-c.is-focus img, :root[data-mode="dark"] #mob .w-c.is-focus img { filter: none !important; }
#mob .m-nav .kn.is-moving { filter: none; }
/* header: one identity line set big, in two lines (Utkarsh / Bramhankar), at the site's heading scale.
   The flipping role title stays on desktop; on the phone the answer right below already says what Utkarsh does. */
#mob .m-tt { display: none !important; }
#mob .m-nm { width: min-content; margin: 0; font: 400 58px/0.95 var(--pixel) !important; letter-spacing: 0; color: var(--ink); white-space: normal; }
#mob .m-av { width: 104px !important; height: 104px !important; }
#mob .m-hdr { align-items: center; gap: 20px; }
#mob .m-id { container-type: normal; display: flex; flex-direction: column; justify-content: center; }
/* header line: name ⇄ roles flip (two lines). No blur on phones (iOS memory) */
#mob .m-nm { width: auto; min-height: 2em; overflow: hidden; }
#mob .m-nm .flip { display: inline-grid; clip-path: none; }
#mob .m-nm .flip__w { white-space: nowrap; filter: none !important; transition: opacity .5s var(--mo), transform .6s var(--mo); }
/* header rule spans the content width (same edges as the So far line), like the desktop header rule */
#mob .mv-about .m-rule, #mob.m-short .mv-about .m-rule { margin-left: 0; margin-right: 0; }