/* Pinopela — shared stylesheet: logo tone + mobile/tablet layout (<900px). Desktop layout lives inline. */
[data-nav-item][style*="rgb(255, 255, 255)"] img{filter:invert(1)}
[data-nav-item] img{transition:filter .3s ease}

/* ---------- global mobile ---------- */
html.mob,html.mob body{overflow-x:clip}
html.mob [data-m],html.mob [data-a],html.mob [data-b],html.mob [data-hero] [data-layer]{transform:none !important}
html.mob header[data-nav] > div{padding:env(safe-area-inset-top) 20px 0 !important;height:60px !important;box-sizing:content-box}
html.mob header[data-nav] a{padding:16px 0}
html.mob header[data-nav] img{height:10px !important}
html.mob header[data-nav] button{padding:18px 0 18px 18px !important;font-size:12px !important;letter-spacing:.4em !important}
html.mob [data-menu]{grid-template-columns:1fr !important;grid-template-rows:calc(60px + env(safe-area-inset-top)) 1fr auto;overflow-y:auto}
html.mob [data-menu] > div:first-child{grid-row:1 / 3;grid-column:1;padding:0 20px !important}
html.mob [data-menu] > div:first-child > div:first-child{height:60px !important;padding-top:env(safe-area-inset-top)}
html.mob [data-menu] > div:first-child > div:first-child img{height:10px !important}
html.mob [data-menu] > div:first-child > div:last-child{height:24px !important}
html.mob [data-menu] nav{gap:2px !important;justify-content:flex-start !important;padding-top:24px}
html.mob [data-menu] nav a{font-size:21px !important;letter-spacing:.22em !important;padding:10px 0;white-space:normal !important}
html.mob [data-menu] > div:last-child{display:contents !important}
html.mob [data-menu] > div:last-child > div:first-child{grid-row:1;grid-column:1;justify-self:end;align-self:start;z-index:2;height:60px !important;padding:env(safe-area-inset-top) 20px 0 0}
html.mob [data-menu] > div:last-child > div:first-child button{color:#141414 !important;padding:18px 0 18px 18px !important}
html.mob [data-menu] > div:last-child > img{display:none}
html.mob [data-menu] > div:last-child > div:last-child{grid-row:3;grid-column:1;margin:0 !important;background:#C3D3EA;padding:24px 20px calc(24px + env(safe-area-inset-bottom)) !important;flex-direction:row !important;flex-wrap:wrap;gap:6px 28px !important}
html.mob [data-menu] > div:last-child > div:last-child a{padding:10px 0}
html.mob footer{flex-direction:column;align-items:flex-start !important;gap:22px !important;padding:36px 20px calc(36px + env(safe-area-inset-bottom)) !important}
html.mob footer > div{gap:4px 28px !important}
html.mob footer a{padding:10px 0}
/* type scale: cqw sizes are tuned for desktop; give them readable floors on phones */
html.mob main [style*="Barlow"]{font-size:17px !important;line-height:1.45 !important}
html.mob main [style*="Barlow"][style*="font-weight: 500"]{font-size:18px !important;line-height:1.35 !important}
html.mob main [style*="font-size: 0."],html.mob main [style*="font-size: clamp(10px"],html.mob main [style*="font-size: clamp(11px"]{font-size:11px !important;letter-spacing:.26em !important}
html.mob main [style*="Montserrat"][style*="font-size: 1."]{font-size:14px !important;letter-spacing:.18em !important}
html.mob main [style*="Montserrat"][style*="font-size: 2."]{font-size:22px !important;letter-spacing:.16em !important}
html.mob main [style*="Montserrat"][style*="font-size: 3."]{font-size:26px !important;letter-spacing:.18em !important}
html.mob main [style*="Montserrat"][style*="font-size: 4."],html.mob main [style*="Montserrat"][style*="font-size: 4cqw"]{font-size:28px !important;letter-spacing:.16em !important}
html.mob main [style*="Montserrat"][style*="font-size: 5."],html.mob main [style*="Montserrat"][style*="font-size: 5cqw"],html.mob main [style*="Montserrat"][style*="font-size: 6."],html.mob main [style*="Montserrat"][style*="font-size: 6cqw"]{font-size:31px !important;letter-spacing:.14em !important}
html.mob main h1,html.mob main h2{white-space:normal !important}
html.mob main a[style*="bg-orange"]{width:100% !important;min-width:0 !important;height:60px !important;font-size:12px !important;letter-spacing:.3em !important;padding-left:.3em !important}
html.mob main a[style*="border-bottom: 1px"]{padding-top:10px;padding-bottom:6px !important;white-space:nowrap}
html.mob main section[style*="grid-template"],html.mob main section > div[style*="grid-template"]{grid-template-columns:minmax(0,1fr) !important;gap:28px !important}
html.mob main section[style*="padding"]{padding-left:20px !important;padding-right:20px !important}
html.mob main div[style*="align-items: flex-end"]{align-items:flex-start !important;text-align:left !important}
html.mob main div[style*="justify-content: flex-end"]{justify-content:flex-start !important}
html.mob main [style*="aspect-ratio: 100 / 4"][data-screen-label],html.mob main [style*="aspect-ratio: 100 / 5"][data-screen-label]{aspect-ratio:100 / 125 !important}

/* ---------- HOME ---------- */
html.mob[data-page="home"] [data-hero]{position:relative !important;aspect-ratio:100 / 110 !important}
html.mob[data-page="home"] [data-pin-spacer]{height:0 !important}
html.mob[data-page="home"] [data-layer="panel-orange"]{left:5% !important;top:15% !important;width:90% !important;height:85% !important}
html.mob[data-page="home"] [data-layer="wordmark"]{left:9% !important;width:82% !important;top:23% !important}
html.mob [data-hero] [data-layer="anthony"]{left:37.40% !important;top:56.40% !important;height:43.60% !important}
html.mob [data-hero] [data-layer="paolo"]{left:19.62% !important;top:52.68% !important;height:55.03% !important}
html.mob [data-hero] [data-layer="zsaris"]{left:60.92% !important;top:51.11% !important;height:52.18% !important}
html.mob [data-hero] [data-layer="julz"]{left:-7% !important;top:47.11% !important;height:57.18% !important}
html.mob [data-hero] [data-layer="jj"]{left:76.5% !important;top:46.68% !important;height:80.05% !important}

html.mob[data-page="home"] [data-about]{aspect-ratio:auto !important;display:flex;flex-direction:column;padding:72px 20px 64px;box-sizing:border-box}
html.mob[data-page="home"] [data-a="bg"]{top:0 !important;height:100% !important}
html.mob[data-page="home"] [data-a="frame"]{position:relative !important;left:auto !important;top:auto !important;width:100% !important;height:auto !important;aspect-ratio:4 / 5}
html.mob[data-page="home"] [data-a="title"]{position:relative !important;left:auto !important;top:auto !important;margin:-.62em 0 0 .25em !important;font-size:15cqw !important;letter-spacing:.3em !important}
html.mob[data-page="home"] [data-about] > div{position:relative !important;left:auto !important;top:auto !important;width:auto !important;margin-top:28px}
html.mob[data-page="home"] [data-about] > div > div{flex-wrap:wrap;gap:20px 28px !important;margin-top:28px !important}
html.mob[data-page="home"] [data-about] button{gap:14px !important}
html.mob[data-page="home"] [data-about] button > span:first-child{width:150px !important;height:32px !important}
html.mob[data-page="home"] [data-booking]{aspect-ratio:100 / 112 !important}
html.mob[data-page="home"] [data-booking] > div:nth-child(1){width:100% !important;height:46% !important;clip-path:inset(0) !important;overflow:hidden}
html.mob[data-page="home"] [data-b="wave"]{left:-30% !important;top:2% !important;width:160% !important}
html.mob[data-page="home"] [data-booking] > div:nth-child(2){left:0 !important;top:46% !important;width:100% !important;height:54% !important}
html.mob[data-page="home"] [data-booking] > a{left:20px !important;right:20px !important;width:auto !important;top:calc(46% - 34px) !important;height:68px !important;font-size:13px !important;letter-spacing:.34em !important}

/* ---------- WHO WE ARE ---------- */
html.mob[data-page="who"] section[data-screen-label="01 Who We Are"]{aspect-ratio:auto !important;display:flex;flex-direction:column;padding-bottom:56px}
html.mob[data-page="who"] section[data-screen-label="01 Who We Are"] > div:first-child{position:relative !important;left:auto !important;width:100% !important;height:auto !important;aspect-ratio:4 / 5;order:2;margin-top:32px}
html.mob[data-page="who"] section[data-screen-label="01 Who We Are"] > h1{position:relative !important;left:auto !important;top:auto !important;order:1;padding:100px 20px 0;font-size:17cqw !important;letter-spacing:.22em !important}
html.mob[data-page="who"] section[data-screen-label="01 Who We Are"] > div:last-child{position:relative !important;left:auto !important;top:auto !important;width:auto !important;order:3;padding:28px 20px 0;gap:16px !important}
html.mob[data-page="who"] section[data-screen-label="01 Who We Are"] span[style*="bg-orange"]{padding:8px 10px 8px 12px !important}
html.mob[data-page="who"] section[data-screen-label="02 Since 2013"]{aspect-ratio:auto !important;display:grid !important;grid-template-columns:1fr 1fr;gap:12px;padding:72px 20px 56px;box-sizing:border-box}
html.mob[data-page="who"] section[data-screen-label="02 Since 2013"] > *{position:relative !important;left:auto !important;top:auto !important}
html.mob[data-page="who"] section[data-screen-label="02 Since 2013"] > h2,html.mob[data-page="who"] section[data-screen-label="02 Since 2013"] > p,html.mob[data-page="who"] section[data-screen-label="02 Since 2013"] > span,html.mob[data-page="who"] section[data-screen-label="02 Since 2013"] > div:nth-of-type(1){grid-column:1 / -1}
html.mob[data-page="who"] section[data-screen-label="02 Since 2013"] > p{width:auto !important;margin:8px 0 20px !important}
html.mob[data-page="who"] section[data-screen-label="02 Since 2013"] > div{width:auto !important}
html.mob[data-page="who"] section[data-screen-label="02 Since 2013"] > span{margin-top:8px}
html.mob[data-page="who"] section[data-screen-label="03 The Collective"]{aspect-ratio:auto !important;display:flex;flex-direction:column;gap:24px;padding:72px 20px 64px;box-sizing:border-box}
html.mob[data-page="who"] section[data-screen-label="03 The Collective"] > *{position:relative !important;left:auto !important;top:auto !important}
html.mob[data-page="who"] section[data-screen-label="03 The Collective"] > :nth-child(1){width:100% !important;order:3}
html.mob[data-page="who"] section[data-screen-label="03 The Collective"] > :nth-child(2){order:1}
html.mob[data-page="who"] section[data-screen-label="03 The Collective"] > :nth-child(3){width:auto !important;order:2}
html.mob[data-page="who"] section[data-screen-label="03 The Collective"] > :nth-child(4){order:4;margin-top:16px}
html.mob[data-page="who"] section[data-screen-label="03 The Collective"] > :nth-child(4) span:last-child{width:auto !important}
html.mob[data-page="who"] section[data-screen-label="03 The Collective"] > :nth-child(5){order:5;flex-wrap:wrap;gap:12px 20px !important}
html.mob[data-page="who"] section[data-screen-label="04 Across Stages"]{aspect-ratio:auto !important;padding:88px 20px 40px;box-sizing:border-box}
html.mob[data-page="who"] section[data-screen-label="04 Across Stages"] > *{position:relative !important;left:auto !important;top:auto !important;display:block}
html.mob[data-page="who"] section[data-screen-label="04 Across Stages"] > span{margin-top:20px;line-height:1.7}
html.mob[data-page="who"] section[data-screen-label="04 Chronology"]{padding-top:56px !important;padding-left:0 !important;padding-right:0 !important}
html.mob[data-page="who"] section[data-screen-label="04 Chronology"] > div{flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;padding-left:20px !important;padding-right:20px !important;gap:16px !important}
html.mob[data-page="who"] section[data-screen-label="04 Chronology"] > div > div[style*="display: flex"]{flex-direction:column !important;gap:14px !important}
html.mob[data-page="who"] section[data-screen-label="04 Chronology"] div{align-items:flex-start !important;text-align:left !important}
html.mob[data-page="who"] section[data-screen-label="04 Chronology"] span[data-m]{order:-1}
html.mob[data-page="who"] section[data-screen-label="04 Chronology"] figure{margin:0 !important;width:100%}
html.mob[data-page="who"] section[data-screen-label="05 Beyond Competition"] > div:nth-of-type(2){margin-left:0 !important;flex-wrap:wrap;gap:4px 28px !important}
html.mob[data-page="who"] section[data-screen-label="06 Today"]{padding:0 !important}
html.mob[data-page="who"] section[data-screen-label="06 Today"] > div:first-child{aspect-ratio:4 / 5 !important}
html.mob[data-page="who"] section[data-screen-label="06 Today"] > div:first-child h2{font-size:22px !important;letter-spacing:.2em !important;left:20px !important;top:76px !important}
html.mob[data-page="who"] section[data-screen-label="06 Today"] > div:nth-child(2){padding:40px 20px 56px !important}

/* ---------- SINGERS ---------- */
html.mob[data-page="singers"] section[data-screen-label="01 The Singers"]{aspect-ratio:100 / 118 !important}
html.mob[data-page="singers"] section[data-screen-label="01 The Singers"] > h1{top:84px !important;left:20px !important;font-size:8cqw !important;letter-spacing:.2em !important}
html.mob[data-page="singers"] section[data-screen-label="01 The Singers"] > nav{top:124px !important;left:20px !important;right:20px;flex-wrap:wrap;gap:0 20px !important}
html.mob[data-page="singers"] section[data-screen-label="01 The Singers"] > nav a{padding:10px 0}
html.mob[data-page="singers"] section[data-screen-label="01 The Singers"] > img{top:180px !important;height:calc(100% - 180px) !important}
html.mob[data-page="singers"] section[id^="singer-"]{aspect-ratio:auto !important;display:flex !important;flex-direction:column;padding:84px 0 48px;box-sizing:border-box}
html.mob[data-page="singers"] section[id^="singer-"] > h2{position:relative !important;left:auto !important;top:auto !important;padding:0 20px;letter-spacing:.12em !important;white-space:nowrap !important;order:1}
html.mob[data-page="singers"] section[id^="singer-"] > img[alt]:not([alt=""]){position:relative !important;left:auto !important;top:auto !important;display:block;height:auto !important;width:80% !important;max-width:440px;margin:20px auto 0;order:2}
html.mob[data-page="singers"] section[id^="singer-"] > div[style*="flex-direction"]{position:relative !important;left:auto !important;top:auto !important;width:auto !important;padding:24px 20px 0;gap:10px !important;order:3}
html.mob[data-page="singers"] #singer-julz > h2{font-size:24cqw !important}
html.mob[data-page="singers"] #singer-paolo > h2{font-size:19cqw !important}
html.mob[data-page="singers"] #singer-anthony > h2{font-size:14cqw !important}
html.mob[data-page="singers"] #singer-zsaris > h2{font-size:16cqw !important}
html.mob[data-page="singers"] #singer-jj > h2{font-size:34cqw !important}
html.mob[data-page="singers"] #singer-jj > img[alt]:not([alt=""]){width:72% !important}
html.mob[data-page="singers"] #singer-paolo > div[data-m]{left:14% !important;top:200px !important;width:72% !important;height:auto !important;bottom:150px}
html.mob[data-page="singers"] #singer-zsaris > img[alt=""]{top:40% !important;left:-30% !important;width:160% !important}
html.mob[data-page="singers"] section[data-screen-label="07 One Collective"] div[style*="align-items: flex-end"]{align-items:stretch !important}

/* ---------- MUSIC ---------- */
html.mob[data-page="music"] main button{width:56px !important;height:56px !important;font-size:10px !important;letter-spacing:.2em !important;padding-left:.2em !important}
html.mob[data-page="music"] main [role="slider"]{height:48px !important}
html.mob[data-page="music"] section[data-screen-label="01 Listen"]{aspect-ratio:100 / 150 !important}
html.mob[data-page="music"] section[data-screen-label="01 Listen"] > div:first-child{left:0 !important;top:40% !important;width:100% !important;height:60% !important}
html.mob[data-page="music"] section[data-screen-label="01 Listen"] > h1{top:136px !important;left:20px !important;font-size:16cqw !important;letter-spacing:.12em !important}
html.mob[data-page="music"] section[data-screen-label="01 Listen"] > img{top:44% !important;left:-20% !important;width:140% !important}
html.mob[data-page="music"] section[data-screen-label="01 Listen"] > p{top:88px !important;left:20px !important;right:20px;white-space:normal !important;line-height:1.7}
html.mob[data-page="music"] section[data-screen-label="02 Featured"] h2{margin:14px 0 28px !important}
html.mob[data-page="music"] section[data-screen-label="02 Featured"] [role="slider"]{height:96px !important}
html.mob[data-page="music"] section[data-screen-label="02 Featured"] > div:last-child{flex-direction:column;align-items:flex-start !important;gap:20px;margin-top:24px !important}
html.mob[data-page="music"] section[data-screen-label="02 Featured"] > div:last-child > div{gap:18px !important}
html.mob[data-page="music"] section[data-screen-label="02 Featured"] button{width:64px !important;height:64px !important}
html.mob[data-page="music"] section[data-screen-label="03 Selected Clips"] > h2{margin:0 20px 28px !important}
html.mob[data-page="music"] section[data-screen-label="03 Selected Clips"] > div[style*="grid"]{grid-template-columns:minmax(0,1fr) !important;gap:18px !important;padding:28px 20px !important}
html.mob[data-page="music"] section[data-screen-label="03 Selected Clips"] > div[style*="grid"] > div{align-items:flex-start !important;text-align:left !important}
html.mob[data-page="music"] section[data-screen-label="03 Selected Clips"] > div[style*="grid"] > div[style*="flex-direction: column"]{order:-1;gap:8px !important}
html.mob[data-page="music"] section[data-screen-label="03 Selected Clips"] > div[style*="grid"] > div[style*="align-items: center"]{align-items:center !important;gap:14px !important}
html.mob[data-page="music"] main span[style*="width: 7cqw"]{width:auto !important;min-width:92px}
html.mob[data-page="music"] section[data-screen-label="03 Selected Clips"] > div:not([style*="grid"]){aspect-ratio:4 / 3 !important}
html.mob[data-page="music"] section[data-screen-label="04 A Cappella"]{aspect-ratio:100 / 140 !important}
html.mob[data-page="music"] section[data-screen-label="04 A Cappella"] > div:nth-of-type(1){left:20px !important;top:64px !important;width:76% !important}
html.mob[data-page="music"] section[data-screen-label="04 A Cappella"] > div:nth-of-type(2){left:auto !important;right:20px;top:36% !important;width:46% !important}
html.mob[data-page="music"] section[data-screen-label="04 A Cappella"] > h2{top:auto !important;bottom:28px;left:20px !important;font-size:11cqw !important;letter-spacing:.14em !important}
html.mob[data-page="music"] section[data-screen-label="05 Christmas"] div[style*="grid"]{grid-template-columns:minmax(0,1fr) !important;gap:14px !important}
html.mob[data-page="music"] section[data-screen-label="05 Christmas"] > div:first-child{width:72% !important}
html.mob[data-page="music"] section[data-screen-label="06 Watch"] span[style*="bg-orange"]{padding:12px 16px !important}
html.mob[data-page="music"] section[data-screen-label="06 Watch"] > div:last-child{flex-wrap:wrap;gap:4px 28px !important}

/* shared CTA bands (Music 07, Performances 09, Projects 07) */
html.mob[data-page="music"] section[data-screen-label="07 Performances"],html.mob[data-page="perf"] section[data-screen-label="09 Our Journey"],html.mob[data-page="proj"] section[data-screen-label="07 Our Journey"]{aspect-ratio:100 / 120 !important}
html.mob[data-page="music"] section[data-screen-label="07 Performances"] > h2,html.mob[data-page="perf"] section[data-screen-label="09 Our Journey"] > h2,html.mob[data-page="proj"] section[data-screen-label="07 Our Journey"] > h2{top:84px !important;left:20px !important;font-size:9cqw !important;letter-spacing:.2em !important}
html.mob[data-page="music"] section[data-screen-label="07 Performances"] > a,html.mob[data-page="perf"] section[data-screen-label="09 Our Journey"] > a,html.mob[data-page="proj"] section[data-screen-label="07 Our Journey"] > a{left:20px !important;right:20px !important;bottom:32px !important;width:auto !important}

/* ---------- PERFORMANCES ---------- */
html.mob[data-page="perf"] section[data-screen-label="01 Performances"]{aspect-ratio:100 / 140 !important}
html.mob[data-page="perf"] section[data-screen-label="01 Performances"] > h1{top:96px !important;left:20px !important;font-size:7.6cqw !important}
html.mob[data-page="perf"] section[data-screen-label="01 Performances"] > div{left:20px !important;right:20px;width:auto !important;height:auto !important;padding:22px 20px !important}
html.mob[data-page="perf"] section[data-screen-label="02 Featured"] > div{margin-top:24px !important}
html.mob[data-page="perf"] section[data-screen-label="02 Featured"] > div > div:first-child > div:last-child{right:0 !important;bottom:-18% !important;width:46% !important}
html.mob[data-page="perf"] section[data-screen-label="02 Featured"] > div > div:last-child{padding-left:0 !important;margin-top:48px}
html.mob[data-page="perf"] section[data-screen-label="03 Archive"] > h2{margin:0 20px 40px !important}
html.mob[data-page="perf"] section[data-screen-label="03 Archive"] > div[style*="display: flex"]{flex-direction:column !important;align-items:flex-start !important;padding:0 20px 56px !important;gap:16px !important}
html.mob[data-page="perf"] main span[data-m]{order:-1}
html.mob[data-page="perf"] section[data-screen-label="04 Singapore 2016"] > span{margin-left:-6cqw !important}
html.mob[data-page="perf"] section[data-screen-label="05 Hong Kong 2017"] > div{padding-top:8px !important}
html.mob[data-page="perf"] section[data-screen-label="06 Shuffle x Play 2018"] > div:first-child{width:76% !important}
html.mob[data-page="perf"] section[data-screen-label="07 Moscow 2019"]{padding-right:20px !important}
html.mob[data-page="perf"] section[data-screen-label="08 Radio Nights 2026"] > div:last-child{width:64% !important}

/* ---------- PROJECTS ---------- */
html.mob[data-page="proj"] section[data-screen-label="01 Projects"]{aspect-ratio:100 / 150 !important}
html.mob[data-page="proj"] section[data-screen-label="01 Projects"] > div:nth-of-type(1){top:46% !important;width:100% !important;height:54% !important}
html.mob[data-page="proj"] section[data-screen-label="01 Projects"] > div:nth-of-type(2){left:20px !important;top:39% !important;width:44% !important;height:14% !important}
html.mob[data-page="proj"] section[data-screen-label="01 Projects"] > h1{top:96px !important;left:20px !important;font-size:10cqw !important}
html.mob[data-page="proj"] section[data-screen-label="01 Projects"] > div:nth-of-type(3){top:160px !important;left:20px !important;gap:8px !important}
html.mob[data-page="proj"] section[data-screen-label="04 Christmas Repertoire"] > div:first-child{width:66% !important}
html.mob[data-page="proj"] section[data-screen-label="05 Visual Archive"] > div:first-child{flex-direction:column;align-items:flex-start !important;gap:12px;padding:0 20px 32px !important}
html.mob[data-page="proj"] [data-h] > div{width:64vw !important}
html.mob[data-page="proj"] [data-h]{padding-left:20px !important;gap:14px !important}
html.mob[data-page="proj"] section[data-screen-label="06 Festival Projects"] > div:first-child{flex-direction:column;align-items:flex-start !important;gap:16px;margin-bottom:24px !important}
html.mob[data-page="proj"] section[data-screen-label="06 Festival Projects"] > div[style*="grid"]{grid-template-columns:minmax(0,1fr) !important;gap:6px !important;padding:22px 0 !important}

/* ---------- RADIO NIGHTS ---------- */
html.mob[data-page="rn"] section[data-screen-label="01 Radio Nights"]{padding-top:96px !important;padding-bottom:48px !important}
html.mob[data-page="rn"] section[data-screen-label="01 Radio Nights"] > div:first-child{gap:20px !important}
html.mob[data-page="rn"] section[data-screen-label="01 Radio Nights"] > div:first-child > div[style*="grid"]{grid-template-columns:minmax(0,1fr) 1fr !important;gap:22px 20px !important}
html.mob[data-page="rn"] section[data-screen-label="01 Radio Nights"] > div:first-child > div[style*="grid"] > div:first-child{grid-column:1 / -1}
html.mob[data-page="rn"] section[data-screen-label="01 Radio Nights"] > div:last-child{grid-template-rows:repeat(3,calc((100vw - 40px) / 3)) !important}
html.mob[data-page="rn"] section[data-screen-label="02 Atmosphere"]{aspect-ratio:1 / 1 !important}
html.mob[data-page="rn"] section[data-screen-label="03 Details"] [style*="font-size: 2.3cqw"]{font-size:22px !important;letter-spacing:.04em !important}
html.mob[data-page="rn"] section[data-screen-label="03 Details"] [style*="font-size: 5cqw"]{font-size:44px !important}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] [style*="grid-template-columns: 6cqw"]{grid-template-columns:44px minmax(0,1fr) !important;gap:12px !important;padding:20px 0 !important}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] [style*="font-size: 2.6cqw"]{font-size:26px !important}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] div[style*="nowrap"],html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] span[style*="nowrap"]{white-space:normal !important}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] div[style*="nowrap"]{flex-wrap:wrap;gap:8px 12px !important}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] > div:last-child{width:100%;max-width:360px;justify-self:center;margin-top:8px}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] > div:last-child > div:last-child{padding:16px !important;gap:14px !important}
html.mob[data-page="rn"] section[data-screen-label="05 Poster"]{aspect-ratio:100 / 150 !important}
html.mob[data-page="rn"] section[data-screen-label="05 Poster"] > div{left:20px !important;width:calc(100% - 40px) !important;height:72% !important}
html.mob[data-page="rn"] section[data-screen-label="05 Poster"] > span:nth-of-type(1){left:20px !important;top:76% !important;font-size:15cqw !important}
html.mob[data-page="rn"] section[data-screen-label="05 Poster"] > span:nth-of-type(2){left:24% !important;top:87% !important;font-size:15cqw !important}

/* ---------- BOOK ---------- */
html.mob[data-page="book"] section[data-screen-label="01 Book Pinopela"]{aspect-ratio:auto !important;display:flex;flex-direction:column}
html.mob[data-page="book"] section[data-screen-label="01 Book Pinopela"] > div:first-child{position:relative !important;left:auto !important;width:100% !important;height:auto !important;aspect-ratio:4 / 3;order:2}
html.mob[data-page="book"] section[data-screen-label="01 Book Pinopela"] > div:last-child{position:relative !important;left:auto !important;top:auto !important;width:auto !important;padding:100px 20px 36px;gap:18px !important}
html.mob[data-page="book"] section[data-screen-label="01 Book Pinopela"] h1{font-size:11cqw !important;letter-spacing:.2em !important}
html.mob[data-page="book"] section[data-screen-label="02 How Booking Works"]{padding-top:40px !important;padding-bottom:40px !important}
html.mob[data-page="book"] section[data-screen-label="02 How Booking Works"] [style*="font-size: 3.4cqw"]{font-size:28px !important}
html.mob[data-page="book"] section[data-screen-label="03 Inquiry Form"]{padding:56px 20px calc(72px + env(safe-area-inset-bottom)) !important}
html.mob[data-page="book"] ol[aria-label="Booking steps"]{gap:5px !important;margin-bottom:32px !important}
html.mob[data-page="book"] ol[aria-label="Booking steps"] button{padding-top:10px !important;min-height:44px}
html.mob[data-page="book"] ol[aria-label="Booking steps"] button span:first-child{font-size:16px !important}
html.mob[data-page="book"] ol[aria-label="Booking steps"] button span:last-child{display:none}
html.mob[data-page="book"] form > div{grid-template-columns:minmax(0,1fr) !important;gap:28px !important}
html.mob[data-page="book"] form > div > div:first-child{flex-direction:column !important;align-items:flex-start !important;gap:8px !important}
html.mob[data-page="book"] form > div > div:first-child > span:first-child{font-size:60px !important}
html.mob[data-page="book"] form > div > div:first-child > span:last-child{white-space:nowrap}
html.mob[data-page="book"] form > div > div:first-child > h2{font-size:18px !important;letter-spacing:.16em !important}

html.mob[data-page="book"] [data-step] div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important;row-gap:26px !important}
html.mob[data-page="book"] [data-step] [role="radiogroup"]{row-gap:10px !important}
html.mob[data-page="book"] [data-step] [role="radiogroup"] label{min-height:56px;box-sizing:border-box;padding:14px 18px !important;letter-spacing:.16em !important}
html.mob[data-page="book"] [data-step] dl > div{grid-template-columns:minmax(0,1fr) !important;gap:4px !important}
html.mob[data-page="book"] form div[style*="margin-top: 56px"]{flex-direction:column-reverse;align-items:stretch !important;gap:18px !important;margin-top:40px !important}
html.mob[data-page="book"] form button[type="submit"]{width:100% !important;min-width:0 !important;padding:0 20px 0 calc(20px + .3em) !important;letter-spacing:.3em !important}
html.mob[data-page="book"] form button[type="button"][style*="visibility"]{align-self:center;padding:12px 4px 6px !important}
html.mob[data-page="book"] #inquiry > div[role="status"]{grid-template-columns:minmax(0,1fr) !important;gap:16px !important}
html.mob[data-page="music"] section[data-screen-label="03 Selected Clips"],html.mob[data-page="perf"] section[data-screen-label="03 Archive"],html.mob[data-page="proj"] section[data-screen-label="05 Visual Archive"]{padding-left:0 !important;padding-right:0 !important}
html.mob[data-page="who"] section[data-screen-label="04 Chronology"] > div div{width:100% !important;max-width:100%}
html.mob[data-page="who"] section[data-screen-label="04 Chronology"] > div > *{max-width:100%;box-sizing:border-box}
html.mob[data-page="who"] section[data-screen-label="06 Today"] > div:nth-child(2) > div:first-child > div{flex-direction:column;gap:10px !important}
html.mob[data-page="who"] section[data-screen-label="06 Today"] > div:nth-child(2) span{white-space:nowrap}
html.mob[data-page="perf"] main section > div[style*="display: flex"] > div,html.mob[data-page="perf"] main section > div[style*="grid"] > div{width:100%;max-width:100%}
html.mob[data-page="singers"] section[id^="singer-"] > img[alt]:not([alt=""]){aspect-ratio:4 / 5 !important;width:84% !important;object-fit:cover;object-position:50% 0}
html.mob[data-page="singers"] #singer-jj > img[alt]:not([alt=""]){width:84% !important;aspect-ratio:4 / 5 !important}
html.mob[data-page="singers"] section[data-screen-label="07 One Collective"] div[style*="flex-wrap"]{flex-direction:column;gap:10px !important}
html.mob[data-page="singers"] section[data-screen-label="07 One Collective"] div[style*="flex-wrap"] span{white-space:nowrap}
html.mob[data-page="singers"] section[data-screen-label="07 One Collective"] a:not([style*="bg-orange"]){align-self:flex-start}
html.mob [data-r]{clip-path:none !important}
html.mob[data-page="perf"] section[data-screen-label="05 Hong Kong 2017"] > div:last-child{order:-1}
html.mob[data-page="rn"] section[data-screen-label="05 Poster"] > span:nth-of-type(2){left:16% !important;font-size:13cqw !important}
html.mob[data-page="rn"] section[data-screen-label="05 Poster"] > span:nth-of-type(1){font-size:13cqw !important}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] div[style*="nowrap"]{flex-direction:column;align-items:flex-start !important;gap:6px !important}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] div[style*="nowrap"] span[aria-hidden]{display:inline-block;transform:rotate(90deg)}
html.mob[data-page="rn"] section[data-screen-label="01 Radio Nights"] > div:last-child{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0 !important}
html.mob[data-page="rn"] section[data-screen-label="01 Radio Nights"] h1{font-size:15cqw !important;letter-spacing:.16em !important}
html.mob[data-page="home"] [data-menu] nav a[href*="Pinopela%20Home.dc"],html.mob[data-page="home"] [data-menu] nav a[href="/"],
html.mob[data-page="who"] [data-menu] nav a[href*="Pinopela%20Who%20We%20Are.dc"],html.mob[data-page="who"] [data-menu] nav a[href="/who-we-are/"],
html.mob[data-page="singers"] [data-menu] nav a[href*="Pinopela%20Singers.dc"],html.mob[data-page="singers"] [data-menu] nav a[href="/singers/"],
html.mob[data-page="music"] [data-menu] nav a[href*="Pinopela%20Music.dc"],html.mob[data-page="music"] [data-menu] nav a[href="/music/"],
html.mob[data-page="perf"] [data-menu] nav a[href*="Pinopela%20Performances.dc"],html.mob[data-page="perf"] [data-menu] nav a[href="/performances/"],
html.mob[data-page="proj"] [data-menu] nav a[href*="Pinopela%20Projects.dc"],html.mob[data-page="proj"] [data-menu] nav a[href="/projects/"],
html.mob[data-page="book"] [data-menu] nav a[href*="Pinopela%20Book.dc"],html.mob[data-page="book"] [data-menu] nav a[href="/book-pinopela/"]{color:#141414 !important}

html.mob[data-page="who"] section[data-screen-label="04 Chronology"] > div{box-sizing:border-box}
html.mob[data-page="music"] main button{font-size:11px !important}
@media (min-width:700px){
html.mob main section[style*="padding"],html.mob[data-page="book"] section[data-screen-label="03 Inquiry Form"]{padding-left:48px !important;padding-right:48px !important}
html.mob[data-page="who"] section[data-screen-label="04 Chronology"] > div{padding-left:48px !important;padding-right:48px !important}
html.mob header[data-nav] > div{padding-left:48px !important;padding-right:48px !important}
html.mob main{font-size:18px}
}
/* ---------- JOURNEY ---------- */
html.mob[data-page="journey"] section[data-screen-label="01 Our Journey"]{aspect-ratio:100 / 140 !important}
html.mob[data-page="journey"] section[data-screen-label="01 Our Journey"] > div:first-child{left:0 !important;top:42% !important;width:100% !important;height:58% !important}
html.mob[data-page="journey"] section[data-screen-label="01 Our Journey"] > h1{top:96px !important;left:20px !important;font-size:12cqw !important;letter-spacing:.18em !important}
html.mob[data-page="journey"] section[data-screen-label="01 Our Journey"] > div:last-child{left:20px !important;right:20px;width:auto !important;height:auto !important;padding:20px !important}
html.mob[data-page="journey"] section[data-chapter]{padding:56px 20px 64px !important;gap:18px !important}
html.mob[data-page="journey"] section[data-chapter] > div:first-child{position:relative !important;top:auto !important}
html.mob[data-page="journey"] section[data-chapter] > div:first-child span{font-size:25cqw !important}
html.mob[data-page="journey"] section[data-chapter] ul{column-gap:18px !important;row-gap:6px !important;font-size:13px !important;line-height:1.5 !important;letter-spacing:.12em !important}
html.mob[data-page="journey"] section[data-chapter] li{white-space:nowrap}
html.mob[data-page="journey"] section[data-chapter] > div:last-child > div:last-child{gap:4px 24px !important}
html.mob[data-page="journey"] section[data-screen-label="Next"] > div{align-items:stretch !important}
html.mob main a[style*="bg-orange"]{white-space:normal !important;text-align:center;padding:0 14px 0 calc(14px + .22em) !important;letter-spacing:.22em !important;font-size:12px !important}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] div[style*="nowrap"]{flex-direction:column !important;align-items:flex-start !important;flex-wrap:nowrap !important;gap:6px !important}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] div[style*="nowrap"] > span{white-space:nowrap !important}
html.mob[data-page="rn"] section[data-screen-label="04 Reserve"] div[style*="nowrap"] > span[aria-hidden]{display:inline-block;transform:rotate(90deg);padding-left:4px}