/* =========================================================
Hot Chocolate Studio — dark bands + cup marks
---------------------------------------------------------
One definition, loaded by every page. Nothing here
overrides existing styles: all class names are new.
USE:
→ Espresso band. Cream type, gold accents, auto-lifted
buttons, cards and cross-links. Works on any existing
section without changing its inner markup.
→ solid cup, 100% opacity
→ cup bullets
→ cup section divider
The faint background ghost cups are unchanged — these are
the foreground, full-opacity moments that sit on top.
========================================================= */
/* ---------- 1. THE DARK BAND ---------- */
.band-dark{
position:relative;
overflow:hidden;
isolation:isolate;
/* same warm cocoa gradient as the homepage contact block */
background:radial-gradient(120% 100% at 15% 0%,#5A3F26 0%,#402C1A 45%,#2E2013 100%);
color:#EDE6DA;
border-top:none !important;
border-bottom:none !important;
/* tighter than the light sections: on a coloured ground the same
padding reads as a large empty gap */
padding:clamp(38px,5vw,60px) 0 !important;
}
.band-dark > .wrap,
.band-dark > .in{position:relative;z-index:1}
/* the injected ghost cups must stay out of the flow — a plain
`.band-dark > *` rule outranks .ghostcup and drops them into
the layout, pushing the headline down by ~200px */
.band-dark .ghostcup{position:absolute}
/* header stack inside a band — pull it in, the colour already separates */
.band-dark .sec-head{margin-bottom:14px}
.band-dark .sec-head h2{margin-top:6px}
.band-dark .sec-head p{margin-top:9px}
.band-dark .cup-mark{margin-bottom:11px}
/* type */
.band-dark h1,
.band-dark h2,
.band-dark h3,
.band-dark .learncta-head,
.band-dark .mindset-h{color:#EDE6DA}
.band-dark h2 em,
.band-dark h1 em,
.band-dark .mindset-h em,
.band-dark .hl{color:#F3CE73;font-style:normal}
.band-dark p,
.band-dark .sec-head p,
.band-dark .learncta-sub,
.band-dark .mindset-sub{color:#E7D9C4}
.band-dark .mindset-sub b,
.band-dark p b{color:#EDE6DA}
.band-dark .eyebrow{color:#E9C88B}
.band-dark a{color:#EDE6DA}
/* rules & dividers inside a dark band */
.band-dark hr,
.band-dark .rule{background:rgba(237,230,218,.14);border:none}
/* buttons */
.band-dark .btn.ghost{
border-color:rgba(237,230,218,.34);
color:#EDE6DA;
background:none;
}
.band-dark .btn.ghost:hover{background:rgba(237,230,218,.09);filter:none}
.band-dark .btn.gold,
.band-dark .btn.primary{background:#F3CE73;color:#2A1B10}
.band-dark .btn.teal,
.band-dark .btn.mint{background:#A6DBC2;color:#123D31}
/* cards / cross-links / tiles that land inside a dark band */
.band-dark .xl{
background:rgba(237,230,218,.055);
border:1px solid rgba(237,230,218,.14);
backdrop-filter:blur(2px);
}
.band-dark .xl:hover{background:rgba(237,230,218,.09)}
.band-dark .xl h3{color:#EDE6DA}
.band-dark .xl p{color:#D5C5AC}
.band-dark .xl .xk{color:#E9C88B}
/* keep the three tinted doors readable if they carry their own fill */
.band-dark .xl.learn,
.band-dark .xl.create,
.band-dark .xl.jam{background:rgba(237,230,218,.06)}
.band-dark .xl.learn .xk{color:#F3CE73}
.band-dark .xl.create .xk{color:#EFCDA2}
.band-dark .xl.jam .xk{color:#A6DBC2}
.band-dark .xl.learn h3,.band-dark .xl.create h3,.band-dark .xl.jam h3{color:#EDE6DA}
.band-dark .xl.learn p,.band-dark .xl.create p,.band-dark .xl.jam p{color:#C9B99F}
.band-dark .basic,
.band-dark .cat{
background:rgba(237,230,218,.05);
border-color:rgba(237,230,218,.14);
}
.band-dark .basic .bn,.band-dark .cat h3{color:#EDE6DA}
.band-dark .basic .bd,.band-dark .cat .ct{color:#C9B99F}
/* the homepage track list, when the music section goes dark */
.band-dark .tracks{border-top-color:rgba(237,230,218,.16)}
.band-dark .track{border-bottom-color:rgba(237,230,218,.12)}
.band-dark .track:hover{background:rgba(237,230,218,.05)}
.band-dark .tplay{
background:rgba(237,230,218,.07);
border-color:rgba(237,230,218,.28);
color:#EDE6DA;
}
.band-dark .track.playing .tplay{background:#F3CE73;border-color:#F3CE73;color:#2A1B10}
.band-dark .tname{color:#EDE6DA;display:block}
.band-dark .tmeta{display:block}
.band-dark .tmeta,.band-dark .tdur{color:#CDBCA2}
.band-dark .tnum{color:#EDE6DA;opacity:.32}
.band-dark .tbars i{background:rgba(237,230,218,.22)}
.band-dark .track.playing .tbars i{background:#F3CE73}
/* form fields, if a band ever wraps one */
.band-dark input,
.band-dark select,
.band-dark textarea{
background:rgba(237,230,218,.07);
border-color:rgba(237,230,218,.22);
color:#EDE6DA;
}
.band-dark input::placeholder,
.band-dark textarea::placeholder{color:#9C8C74}
/* the faint background cup flips to cream inside a dark band */
.band-dark .ghostcup path{fill:#EDE6DA}
.band-dark .ghostcup{opacity:.07;color:#EDE6DA}
/* seats / batch notes */
.band-dark .batch-note{color:#A6DBC2}
.band-dark .seats{color:#BCAB92}
.band-dark .seatdots i{background:rgba(237,230,218,.24)}
.band-dark .seatdots i.filled{background:#F3CE73}
/* ---------- 2. SOLID CUP MARKS (100% opacity) ---------- */
/* a) standalone mark — sits above a headline, centred */
.cup-mark{
display:block;
width:46px;
height:31px;
margin:0 auto 16px;
color:#43301F;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2020%201768%201208%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M26%20112L20%20148L20%20516L22%20662L24%20670L26%20699L38%20770L50%20814L62%20849L76%20882L96%20922L127%20972L171%201029L220%201080L260%201114L290%201135L332%201161L390%201189L423%201202L449%201210L498%201221L554%201228L827%201228L856%201226L908%201218L955%201206L991%201193L1014%201183L1069%201154L1125%201116L1180%201067L1213%201031L1244%20992L1284%20931L1319%20860L1341%20797L1356%20729L1357%20712L1360%20699L1362%20664L1364%20655L1366%20559L1368%20543L1370%20348L1371%20332L1374%20329L1430%20326L1480%20328L1500%20332L1523%20339L1543%20348L1562%20360L1582%20376L1599%20393L1613%20410L1625%20428L1634%20446L1641%20465L1646%20483L1651%20515L1651%20546L1644%20585L1637%20607L1617%20647L1606%20664L1589%20685L1553%20717L1531%20731L1506%20743L1482%20752L1463%20757L1434%20760L1422%20764L1409%20771L1394%20786L1383%20806L1377%20827L1377%20851L1379%20859L1387%20876L1400%20891L1411%20898L1421%20902L1435%20904L1455%20903L1484%20898L1521%20888L1559%20874L1586%20861L1629%20834L1665%20805L1692%20777L1714%20750L1733%20721L1749%20692L1764%20657L1773%20630L1781%20595L1788%20539L1785%20485L1782%20475L1781%20461L1777%20441L1764%20401L1745%20360L1728%20331L1704%20300L1678%20272L1651%20249L1614%20225L1571%20205L1522%20190L1483%20184L1373%20183L1371%20181L1371%20155L1367%20132L1360%20107L1351%2088L1340%2072L1320%2052L1305%2042L1291%2035L1271%2028L1248%2023L1222%2020L156%2020L128%2023L107%2028L86%2037L74%2044L65%2051L48%2069L35%2090Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2020%201768%201208%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M26%20112L20%20148L20%20516L22%20662L24%20670L26%20699L38%20770L50%20814L62%20849L76%20882L96%20922L127%20972L171%201029L220%201080L260%201114L290%201135L332%201161L390%201189L423%201202L449%201210L498%201221L554%201228L827%201228L856%201226L908%201218L955%201206L991%201193L1014%201183L1069%201154L1125%201116L1180%201067L1213%201031L1244%20992L1284%20931L1319%20860L1341%20797L1356%20729L1357%20712L1360%20699L1362%20664L1364%20655L1366%20559L1368%20543L1370%20348L1371%20332L1374%20329L1430%20326L1480%20328L1500%20332L1523%20339L1543%20348L1562%20360L1582%20376L1599%20393L1613%20410L1625%20428L1634%20446L1641%20465L1646%20483L1651%20515L1651%20546L1644%20585L1637%20607L1617%20647L1606%20664L1589%20685L1553%20717L1531%20731L1506%20743L1482%20752L1463%20757L1434%20760L1422%20764L1409%20771L1394%20786L1383%20806L1377%20827L1377%20851L1379%20859L1387%20876L1400%20891L1411%20898L1421%20902L1435%20904L1455%20903L1484%20898L1521%20888L1559%20874L1586%20861L1629%20834L1665%20805L1692%20777L1714%20750L1733%20721L1749%20692L1764%20657L1773%20630L1781%20595L1788%20539L1785%20485L1782%20475L1781%20461L1777%20441L1764%20401L1745%20360L1728%20331L1704%20300L1678%20272L1651%20249L1614%20225L1571%20205L1522%20190L1483%20184L1373%20183L1371%20181L1371%20155L1367%20132L1360%20107L1351%2088L1340%2072L1320%2052L1305%2042L1291%2035L1271%2028L1248%2023L1222%2020L156%2020L128%2023L107%2028L86%2037L74%2044L65%2051L48%2069L35%2090Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
.cup-mark.left{margin-left:0;margin-right:auto}
.cup-mark.sm{width:32px;height:22px;margin-bottom:10px}
.cup-mark.lg{width:68px;height:46px;margin-bottom:20px}
.band-dark .cup-mark{color:#F3CE73}
/* b) cup bullets — replaces the dot in a feature list */
.cup-list{list-style:none;margin-left:0;padding-left:0}
.cup-list li{position:relative;padding-left:30px}
.cup-list li::before{
content:'';
position:absolute;
left:0;
top:.45em;
width:20px;
height:14px;
background:currentColor;
color:#E3A52B;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2020%201768%201208%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M26%20112L20%20148L20%20516L22%20662L24%20670L26%20699L38%20770L50%20814L62%20849L76%20882L96%20922L127%20972L171%201029L220%201080L260%201114L290%201135L332%201161L390%201189L423%201202L449%201210L498%201221L554%201228L827%201228L856%201226L908%201218L955%201206L991%201193L1014%201183L1069%201154L1125%201116L1180%201067L1213%201031L1244%20992L1284%20931L1319%20860L1341%20797L1356%20729L1357%20712L1360%20699L1362%20664L1364%20655L1366%20559L1368%20543L1370%20348L1371%20332L1374%20329L1430%20326L1480%20328L1500%20332L1523%20339L1543%20348L1562%20360L1582%20376L1599%20393L1613%20410L1625%20428L1634%20446L1641%20465L1646%20483L1651%20515L1651%20546L1644%20585L1637%20607L1617%20647L1606%20664L1589%20685L1553%20717L1531%20731L1506%20743L1482%20752L1463%20757L1434%20760L1422%20764L1409%20771L1394%20786L1383%20806L1377%20827L1377%20851L1379%20859L1387%20876L1400%20891L1411%20898L1421%20902L1435%20904L1455%20903L1484%20898L1521%20888L1559%20874L1586%20861L1629%20834L1665%20805L1692%20777L1714%20750L1733%20721L1749%20692L1764%20657L1773%20630L1781%20595L1788%20539L1785%20485L1782%20475L1781%20461L1777%20441L1764%20401L1745%20360L1728%20331L1704%20300L1678%20272L1651%20249L1614%20225L1571%20205L1522%20190L1483%20184L1373%20183L1371%20181L1371%20155L1367%20132L1360%20107L1351%2088L1340%2072L1320%2052L1305%2042L1291%2035L1271%2028L1248%2023L1222%2020L156%2020L128%2023L107%2028L86%2037L74%2044L65%2051L48%2069L35%2090Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2020%201768%201208%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M26%20112L20%20148L20%20516L22%20662L24%20670L26%20699L38%20770L50%20814L62%20849L76%20882L96%20922L127%20972L171%201029L220%201080L260%201114L290%201135L332%201161L390%201189L423%201202L449%201210L498%201221L554%201228L827%201228L856%201226L908%201218L955%201206L991%201193L1014%201183L1069%201154L1125%201116L1180%201067L1213%201031L1244%20992L1284%20931L1319%20860L1341%20797L1356%20729L1357%20712L1360%20699L1362%20664L1364%20655L1366%20559L1368%20543L1370%20348L1371%20332L1374%20329L1430%20326L1480%20328L1500%20332L1523%20339L1543%20348L1562%20360L1582%20376L1599%20393L1613%20410L1625%20428L1634%20446L1641%20465L1646%20483L1651%20515L1651%20546L1644%20585L1637%20607L1617%20647L1606%20664L1589%20685L1553%20717L1531%20731L1506%20743L1482%20752L1463%20757L1434%20760L1422%20764L1409%20771L1394%20786L1383%20806L1377%20827L1377%20851L1379%20859L1387%20876L1400%20891L1411%20898L1421%20902L1435%20904L1455%20903L1484%20898L1521%20888L1559%20874L1586%20861L1629%20834L1665%20805L1692%20777L1714%20750L1733%20721L1749%20692L1764%20657L1773%20630L1781%20595L1788%20539L1785%20485L1782%20475L1781%20461L1777%20441L1764%20401L1745%20360L1728%20331L1704%20300L1678%20272L1651%20249L1614%20225L1571%20205L1522%20190L1483%20184L1373%20183L1371%20181L1371%20155L1367%20132L1360%20107L1351%2088L1340%2072L1320%2052L1305%2042L1291%2035L1271%2028L1248%2023L1222%2020L156%2020L128%2023L107%2028L86%2037L74%2044L65%2051L48%2069L35%2090Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
.band-dark .cup-list li::before{color:#F3CE73}
/* c) cup divider — a rule broken by a solid cup in the middle */
.cup-rule{
display:flex;
align-items:center;
gap:16px;
margin:34px 0;
color:#D9C5A6;
}
.cup-rule::before,
.cup-rule::after{
content:'';
flex:1;
height:1px;
background:currentColor;
opacity:.55;
}
.cup-rule i{
flex:none;
display:block;
width:26px;
height:18px;
background:#E3A52B;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2020%201768%201208%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M26%20112L20%20148L20%20516L22%20662L24%20670L26%20699L38%20770L50%20814L62%20849L76%20882L96%20922L127%20972L171%201029L220%201080L260%201114L290%201135L332%201161L390%201189L423%201202L449%201210L498%201221L554%201228L827%201228L856%201226L908%201218L955%201206L991%201193L1014%201183L1069%201154L1125%201116L1180%201067L1213%201031L1244%20992L1284%20931L1319%20860L1341%20797L1356%20729L1357%20712L1360%20699L1362%20664L1364%20655L1366%20559L1368%20543L1370%20348L1371%20332L1374%20329L1430%20326L1480%20328L1500%20332L1523%20339L1543%20348L1562%20360L1582%20376L1599%20393L1613%20410L1625%20428L1634%20446L1641%20465L1646%20483L1651%20515L1651%20546L1644%20585L1637%20607L1617%20647L1606%20664L1589%20685L1553%20717L1531%20731L1506%20743L1482%20752L1463%20757L1434%20760L1422%20764L1409%20771L1394%20786L1383%20806L1377%20827L1377%20851L1379%20859L1387%20876L1400%20891L1411%20898L1421%20902L1435%20904L1455%20903L1484%20898L1521%20888L1559%20874L1586%20861L1629%20834L1665%20805L1692%20777L1714%20750L1733%20721L1749%20692L1764%20657L1773%20630L1781%20595L1788%20539L1785%20485L1782%20475L1781%20461L1777%20441L1764%20401L1745%20360L1728%20331L1704%20300L1678%20272L1651%20249L1614%20225L1571%20205L1522%20190L1483%20184L1373%20183L1371%20181L1371%20155L1367%20132L1360%20107L1351%2088L1340%2072L1320%2052L1305%2042L1291%2035L1271%2028L1248%2023L1222%2020L156%2020L128%2023L107%2028L86%2037L74%2044L65%2051L48%2069L35%2090Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2020%201768%201208%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M26%20112L20%20148L20%20516L22%20662L24%20670L26%20699L38%20770L50%20814L62%20849L76%20882L96%20922L127%20972L171%201029L220%201080L260%201114L290%201135L332%201161L390%201189L423%201202L449%201210L498%201221L554%201228L827%201228L856%201226L908%201218L955%201206L991%201193L1014%201183L1069%201154L1125%201116L1180%201067L1213%201031L1244%20992L1284%20931L1319%20860L1341%20797L1356%20729L1357%20712L1360%20699L1362%20664L1364%20655L1366%20559L1368%20543L1370%20348L1371%20332L1374%20329L1430%20326L1480%20328L1500%20332L1523%20339L1543%20348L1562%20360L1582%20376L1599%20393L1613%20410L1625%20428L1634%20446L1641%20465L1646%20483L1651%20515L1651%20546L1644%20585L1637%20607L1617%20647L1606%20664L1589%20685L1553%20717L1531%20731L1506%20743L1482%20752L1463%20757L1434%20760L1422%20764L1409%20771L1394%20786L1383%20806L1377%20827L1377%20851L1379%20859L1387%20876L1400%20891L1411%20898L1421%20902L1435%20904L1455%20903L1484%20898L1521%20888L1559%20874L1586%20861L1629%20834L1665%20805L1692%20777L1714%20750L1733%20721L1749%20692L1764%20657L1773%20630L1781%20595L1788%20539L1785%20485L1782%20475L1781%20461L1777%20441L1764%20401L1745%20360L1728%20331L1704%20300L1678%20272L1651%20249L1614%20225L1571%20205L1522%20190L1483%20184L1373%20183L1371%20181L1371%20155L1367%20132L1360%20107L1351%2088L1340%2072L1320%2052L1305%2042L1291%2035L1271%2028L1248%2023L1222%2020L156%2020L128%2023L107%2028L86%2037L74%2044L65%2051L48%2069L35%2090Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
.band-dark .cup-rule{color:rgba(237,230,218,.28)}
.band-dark .cup-rule i{background:#F3CE73}
/* d) inline cup — for use next to a date, seat count or label */
.cup-inline{
display:inline-block;
width:19px;
height:13px;
vertical-align:-1px;
margin-right:7px;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2020%201768%201208%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M26%20112L20%20148L20%20516L22%20662L24%20670L26%20699L38%20770L50%20814L62%20849L76%20882L96%20922L127%20972L171%201029L220%201080L260%201114L290%201135L332%201161L390%201189L423%201202L449%201210L498%201221L554%201228L827%201228L856%201226L908%201218L955%201206L991%201193L1014%201183L1069%201154L1125%201116L1180%201067L1213%201031L1244%20992L1284%20931L1319%20860L1341%20797L1356%20729L1357%20712L1360%20699L1362%20664L1364%20655L1366%20559L1368%20543L1370%20348L1371%20332L1374%20329L1430%20326L1480%20328L1500%20332L1523%20339L1543%20348L1562%20360L1582%20376L1599%20393L1613%20410L1625%20428L1634%20446L1641%20465L1646%20483L1651%20515L1651%20546L1644%20585L1637%20607L1617%20647L1606%20664L1589%20685L1553%20717L1531%20731L1506%20743L1482%20752L1463%20757L1434%20760L1422%20764L1409%20771L1394%20786L1383%20806L1377%20827L1377%20851L1379%20859L1387%20876L1400%20891L1411%20898L1421%20902L1435%20904L1455%20903L1484%20898L1521%20888L1559%20874L1586%20861L1629%20834L1665%20805L1692%20777L1714%20750L1733%20721L1749%20692L1764%20657L1773%20630L1781%20595L1788%20539L1785%20485L1782%20475L1781%20461L1777%20441L1764%20401L1745%20360L1728%20331L1704%20300L1678%20272L1651%20249L1614%20225L1571%20205L1522%20190L1483%20184L1373%20183L1371%20181L1371%20155L1367%20132L1360%20107L1351%2088L1340%2072L1320%2052L1305%2042L1291%2035L1271%2028L1248%2023L1222%2020L156%2020L128%2023L107%2028L86%2037L74%2044L65%2051L48%2069L35%2090Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2220%2020%201768%201208%22%20aria-hidden%3D%22true%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M26%20112L20%20148L20%20516L22%20662L24%20670L26%20699L38%20770L50%20814L62%20849L76%20882L96%20922L127%20972L171%201029L220%201080L260%201114L290%201135L332%201161L390%201189L423%201202L449%201210L498%201221L554%201228L827%201228L856%201226L908%201218L955%201206L991%201193L1014%201183L1069%201154L1125%201116L1180%201067L1213%201031L1244%20992L1284%20931L1319%20860L1341%20797L1356%20729L1357%20712L1360%20699L1362%20664L1364%20655L1366%20559L1368%20543L1370%20348L1371%20332L1374%20329L1430%20326L1480%20328L1500%20332L1523%20339L1543%20348L1562%20360L1582%20376L1599%20393L1613%20410L1625%20428L1634%20446L1641%20465L1646%20483L1651%20515L1651%20546L1644%20585L1637%20607L1617%20647L1606%20664L1589%20685L1553%20717L1531%20731L1506%20743L1482%20752L1463%20757L1434%20760L1422%20764L1409%20771L1394%20786L1383%20806L1377%20827L1377%20851L1379%20859L1387%20876L1400%20891L1411%20898L1421%20902L1435%20904L1455%20903L1484%20898L1521%20888L1559%20874L1586%20861L1629%20834L1665%20805L1692%20777L1714%20750L1733%20721L1749%20692L1764%20657L1773%20630L1781%20595L1788%20539L1785%20485L1782%20475L1781%20461L1777%20441L1764%20401L1745%20360L1728%20331L1704%20300L1678%20272L1651%20249L1614%20225L1571%20205L1522%20190L1483%20184L1373%20183L1371%20181L1371%20155L1367%20132L1360%20107L1351%2088L1340%2072L1320%2052L1305%2042L1291%2035L1271%2028L1248%2023L1222%2020L156%2020L128%2023L107%2028L86%2037L74%2044L65%2051L48%2069L35%2090Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
/* Safari/older-browser fallback: if mask isn't supported the
elements would render as solid blocks — hide them instead. */
@supports not ((-webkit-mask: linear-gradient(#000,#000)) or (mask: linear-gradient(#000,#000))){
.cup-mark,.cup-inline,.cup-rule i{display:none}
.cup-list li{padding-left:19px}
.cup-list li::before{
width:8px;height:8px;top:.5em;border-radius:50%;
background:#E3A52B;-webkit-mask:none;mask:none;
}
}
/* ---------- 3. RHYTHM ---------- */
/* A dark band that sits directly before the footer shouldn't
double up its border with the footer's own top rule. */
.band-dark + footer{border-top:none}
/* ---------- 4. ACCENT VARIANT ---------- */
/* .accent-mint swaps gold for the one cool pop. Used on the
homepage listening section so it reads as its own moment
rather than a seventh identical band. */
.band-dark.accent-mint .cup-mark{color:#A6DBC2}
.band-dark.accent-mint .eyebrow{color:#A6DBC2}
.band-dark.accent-mint h2 em,
.band-dark.accent-mint .hl{color:#A6DBC2}
.band-dark.accent-mint .track.playing .tplay{background:#A6DBC2;border-color:#A6DBC2;color:#123D31}
.band-dark.accent-mint .track.playing .tbars i{background:#A6DBC2}
.band-dark.accent-mint .btn.gold{background:#A6DBC2;color:#123D31}
/* ---------- 5. THE LISTENING PANEL ---------- */
/* The homepage speaks in framed panels on cream: .seq.stage (2px cocoa
border, 26px radius, gradient fill, deep soft shadow), .news-card,
.learncta. A full-bleed colour flood isn't part of that vocabulary —
and the Brand Kit is explicit that mint is an accent, not a surface.
So the listening section becomes a panel built to the same spec as
the sequencer stage, in mint instead of paper. The two then read as
a pair: make a beat up top, hear the room below. */
.listen{
position:relative;
padding:clamp(30px,4vw,52px) 0 !important;
}
.listen > .wrap{position:relative;z-index:1}
.listen-panel{
position:relative;
overflow:hidden;
max-width:1120px;
margin:0 auto;
border:2px solid var(--ink,#43301F);
border-radius:26px;
background:linear-gradient(180deg,#C8EADC 0%,#A6DBC2 100%);
box-shadow:0 26px 60px rgba(67,48,31,.15);
padding:clamp(30px,3.4vw,44px) clamp(20px,2.6vw,38px) clamp(22px,2.6vw,34px);
color:#43301F;
}
@media(max-width:640px){
.listen-panel{border-radius:18px;padding:26px 16px 20px}
}
/* the cup sits inside the panel and is clipped by it — same trick the
sequencer stage uses with its spinning badge */
.listen-panel .ghostcup,
.listen .ghostcup{
position:absolute;
left:auto !important;
right:-46px !important;
bottom:-38px !important;
top:auto !important;
width:170px !important;
opacity:.09;
color:#2B5C4A;
z-index:0;
}
.listen .ghostcup path{fill:#2B5C4A}
.listen-panel > *{position:relative;z-index:1}
/* header — matches .sec-head elsewhere, just recoloured */
.listen-panel .sec-head{margin-bottom:6px}
.listen-panel .sec-head h2{margin-top:5px;color:#43301F}
.listen-panel .sec-head p{margin-top:7px;color:#4A3A2A}
.listen-panel .eyebrow{color:#0F5C48}
/* tracks — the panel padding gives them a sane measure, so no
arbitrary max-width is needed */
.listen-panel .tracks{border-top-color:rgba(67,48,31,.22);margin-top:22px}
.listen-panel .track{border-bottom-color:rgba(67,48,31,.15)}
.listen-panel .track:last-child{border-bottom:none}
.listen-panel .track:hover{background:rgba(255,255,255,.34)}
.listen-panel .tplay{
background:rgba(255,255,255,.62);
border-color:rgba(67,48,31,.26);
color:#43301F;
}
.listen-panel .track.playing .tplay{background:#43301F;border-color:#43301F;color:#A6DBC2}
.listen-panel .tname{color:#43301F;display:block}
.listen-panel .tmeta{display:block}
.listen-panel .tmeta,.listen-panel .tdur{color:#5C4632}
.listen-panel .tnum{color:#43301F;opacity:.36}
.listen-panel .tbars i{background:rgba(67,48,31,.22)}
.listen-panel .track.playing .tbars i{background:#43301F}
/* explore tiles, if that band ever goes dark */
.band-dark .cat .cgo{background:#F3CE73;color:#2A1B10}
.band-dark .cat .cexp{color:#C9B99F}