/* DJ BOY — site v2. Brass on ink. */
:root{
  --ink:#070a12;--ink2:#0c111d;--panel:#111827;--panel2:#151d2e;--line:#243048;
  --text:#f3eee4;--dim:#b7becc;--mute:#8790a3;
  --brass:#c8a046;--brass2:#e6c36a;--copper:#b8733a;--teal:#4fd1c5;--rose:#ff6b8a;
  --r:18px;--max:1180px;color-scheme:dark
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--text);font:400 20px/1.55 -apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit}
button,input{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.eyebrow{font-size:.78rem;letter-spacing:.22em;font-weight:800;color:var(--brass);text-transform:uppercase;margin:0 0 10px}
h1,h2,h3{line-height:1.12;margin:0}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.01em}
.lead{color:var(--dim);font-size:1.12rem;max-width:46em}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:13px 22px;font-weight:800;text-decoration:none;border:1px solid var(--line);background:var(--panel);cursor:pointer}
.btn.gold{background:linear-gradient(180deg,var(--brass2),var(--brass));color:#1a1307;border-color:transparent}
.btn:hover{filter:brightness(1.08)}
section{padding:88px 0;border-top:1px solid #141b2a}

/* header (static, not sticky) */
.top{padding:18px 0;border-bottom:1px solid #141b2a}
.top .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2em;text-decoration:none;font-size:1.15rem}
.logo svg{width:34px;height:34px}
.top nav{display:flex;gap:18px;flex-wrap:wrap;font-size:.92rem;color:var(--dim);flex:1}
.top nav a{text-decoration:none}.top nav a:hover{color:var(--text)}

/* hero */
.hero{padding:70px 0 80px;border-top:0;background:radial-gradient(900px 500px at 80% 10%,rgba(200,160,70,.13),transparent 60%),radial-gradient(700px 420px at 0% 100%,rgba(79,209,197,.08),transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.3rem,5.4vw,4.1rem);letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--brass2)}
.hero .lead{margin:20px 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;color:var(--dim);font-size:.92rem}
.facts b{display:block;color:var(--text);font-size:1.45rem}
.console{background:linear-gradient(180deg,#121a2b,#0c111d);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.console .row{display:flex;justify-content:space-between;color:var(--mute);font-size:.8rem;letter-spacing:.12em;font-weight:700}
.console .live{color:var(--rose)}
.console svg{width:100%;height:auto;display:block;margin:12px 0}
.log{list-style:none;margin:0;padding:0;font-size:.88rem}
.log li{display:grid;grid-template-columns:4.2em 1fr auto;gap:10px;padding:8px 4px;border-top:1px solid #1c2436}
.log .t{color:var(--mute);font-variant-numeric:tabular-nums}.log .k{color:var(--brass);font-weight:700;font-size:.78rem}
.wave-a{fill:none;stroke:var(--brass);stroke-width:2}.wave-b{fill:none;stroke:var(--teal);stroke-width:2}
.beat{stroke:#2a3550;stroke-width:1}.beat.one{stroke:#4ade80;stroke-width:1.5}
.playhead{stroke:#fff;stroke-width:2;animation:ph 6s linear infinite}
@keyframes ph{from{transform:translateX(0)}to{transform:translateX(560px)}}

/* lineup */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:38px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card h3{font-size:1.12rem;letter-spacing:.06em;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.card h3 .ic{width:34px;height:34px;flex:none;color:var(--brass)}
.card p{margin:0;color:var(--dim);font-size:.95rem}
.card .grp{font-size:.7rem;letter-spacing:.2em;color:var(--mute);font-weight:800;margin-bottom:10px}
.card.my{border-color:#5a4a22;background:linear-gradient(180deg,#191a1c,#111827)}

/* network */
.net{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
.net svg{width:100%;height:auto}
.net .node rect{fill:#121a2b;stroke:var(--line);stroke-width:1.5}
.net .node.hub rect{stroke:var(--brass);stroke-width:2}
.net text{fill:var(--text);font:700 15px -apple-system,sans-serif}
.net text.s{fill:var(--mute);font:500 12px -apple-system,sans-serif}
.flow{fill:none;stroke:#2f3d5c;stroke-width:2}
.flow.on{stroke:var(--brass);stroke-dasharray:6 10;animation:dash 1.6s linear infinite}
.flow.on.b{stroke:var(--teal);animation-direction:reverse}
@keyframes dash{to{stroke-dashoffset:-32}}
.ticks{list-style:none;padding:0;margin:20px 0 0}
.ticks li{padding:8px 0 8px 30px;position:relative;color:var(--dim)}
.ticks li:before{content:"";position:absolute;left:4px;top:17px;width:12px;height:12px;border-radius:3px;background:var(--brass);transform:rotate(45deg)}

/* audiences */
.aud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
.aud .card h3{font-size:1.2rem;letter-spacing:0}
.aud ul{margin:12px 0 0;padding-left:1.1em;color:var(--dim);font-size:.93rem}
.aud li{margin:6px 0}

/* day */
.day{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:40px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.day div{padding:22px 18px;background:var(--panel);border-right:1px solid var(--line)}
.day div:last-child{border-right:0}
.day b{display:block;color:var(--brass2);font-size:1.3rem;font-variant-numeric:tabular-nums}
.day span{color:var(--dim);font-size:.92rem}

/* maryland */
.md{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.md .card{padding:28px}
.md .big{font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-.01em}

/* demo */
.demo{text-align:center}
.demo .note{display:inline-block;margin-top:22px;padding:14px 22px;border:1px dashed var(--brass);border-radius:14px;color:var(--brass2);font-weight:700}
.demo .note.flash{animation:flash 1.2s ease 2}
@keyframes flash{50%{background:rgba(200,160,70,.15)}}

/* footer + the little lock */
footer{border-top:1px solid #141b2a;padding:48px 0 56px;color:var(--mute);font-size:.9rem}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.minilock{position:relative;display:flex;align-items:center;gap:12px;background:none;border:1px solid #2a2418;border-radius:16px;padding:10px 16px 10px 12px;cursor:pointer;color:var(--brass2)}
.minilock:hover{border-color:var(--brass)}
.minilock svg{width:46px;height:52px;overflow:visible}
.minilock span{font-weight:800;letter-spacing:.14em;font-size:.82rem}
.minilock .puffs{position:absolute;left:30px;top:-6px;width:1px;height:1px;pointer-events:none}

/* steam particles */
.puff{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(235,238,245,.55),rgba(235,238,245,0) 70%);animation:puff var(--d,2.4s) ease-out forwards}
@keyframes puff{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:.9}100%{transform:translate(var(--x,0),var(--y,-80px)) scale(var(--s,3));opacity:0}}

/* the gate (full-screen overlay; fixed overlay only, the page itself never moves) */
.gate{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  background:radial-gradient(circle at 50% 42%,#1a1710 0%,#0a0b0f 55%,#050608 100%);padding:16px;overflow:hidden}
.gate.open{display:flex;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0}}
.gate .x{position:absolute;top:14px;right:16px;background:none;border:1px solid #3a3222;border-radius:999px;padding:6px 14px;color:var(--dim);cursor:pointer;font-size:.9rem}
.stage{position:relative;width:min(84vw,440px);aspect-ratio:1}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage .steam{position:absolute;inset:0;pointer-events:none}
.gform{display:flex;gap:10px;width:min(92vw,440px)}
.gform input{flex:1;min-width:0;background:#0d0f14;border:1px solid #4a3d22;border-radius:14px;padding:13px 16px;font-size:1.1rem;letter-spacing:.08em}
.gform input:focus{outline:2px solid var(--brass);outline-offset:1px}
.gmsg{min-height:1.4em;color:var(--dim);font-size:.95rem;text-align:center}
.gmsg.bad{color:#ff8a7a}
.gate.shake .stage{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}

/* lock parts */
.door,.bolt,.dial,.gear,.platter,.arm,.ringspin{transform-box:fill-box;transform-origin:center}
.door{transition:transform 1.5s cubic-bezier(.6,.05,.25,1)}
.bolt{transition:transform .6s ease}
.dial{transition:transform 1.2s cubic-bezier(.5,0,.2,1)}
.gear.cw{animation:spin 6s linear infinite;animation-play-state:paused}
.gear.ccw{animation:spin 6s linear infinite reverse;animation-play-state:paused}
.minilock .gear.cw{animation-play-state:running;animation-duration:9s}
@keyframes spin{to{transform:rotate(360deg)}}
.gate.s1 .gear{animation-play-state:running;animation-duration:1.4s}
.gate.s1 .bolt.l{transform:translateX(-26px)}.gate.s1 .bolt.r{transform:translateX(26px)}
.gate.s1 .dial{transform:rotate(-540deg)}
.gate.s2 .door.l{transform:translateX(-62%) rotate(-28deg);transform-origin:0% 50%}
.gate.s2 .door.r{transform:translateX(62%) rotate(28deg);transform-origin:100% 50%}
.gate.s2 .ringspin{animation:spin 2.4s cubic-bezier(.5,0,.3,1) 1}
.platter{animation:spin 1.8s linear infinite;animation-play-state:paused}
.gate.s2 .platter{animation-play-state:running}
.arm{transform-origin:78% 11%;transform:rotate(-24deg);transition:transform 1.2s ease .6s}
.gate.s3 .arm{transform:rotate(0)}
.gate.s3 .stage{transform:scale(1.18);transition:transform 1.6s ease}
.gate.s3 .gform,.gate.s3 .gmsg,.gate.s1 .gform{opacity:0;transition:opacity .5s;pointer-events:none}
.gate.s4{opacity:0;transition:opacity 1s ease}

/* ENTER view */
.enter{display:none;min-height:100vh;padding:28px 0 80px;background:radial-gradient(1000px 600px at 50% -10%,rgba(200,160,70,.14),transparent 60%),var(--ink)}
body.in .public{display:none}
body.in .enter{display:block;animation:fadein 1.1s ease}
.enter .bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.enter h1{font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:.16em;flex:1}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tile{position:relative;aspect-ratio:1;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,#141c2c,#0f1522);cursor:pointer;overflow:hidden;text-align:left;padding:0;color:inherit}
.tile:hover{border-color:var(--brass)}
.tile .f,.tile .b{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;transition:opacity .35s ease,transform .35s ease}
.tile .f .ic{width:58px;height:58px;color:var(--brass)}
.tile .f h3{margin-top:auto;font-size:1.3rem;letter-spacing:.1em}
.tile .f p{margin:6px 0 0;color:var(--dim);font-size:.92rem}
.tile .f .tag{position:absolute;top:18px;right:18px;font-size:.68rem;letter-spacing:.16em;font-weight:800;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.tile .b{opacity:0;transform:translateY(12px);pointer-events:none;background:linear-gradient(180deg,#191f2e,#121827)}
.tile .b h3{font-size:1.05rem;letter-spacing:.12em;color:var(--brass2);margin-bottom:8px}
.tile .b p{margin:0;color:var(--text);font-size:.92rem;line-height:1.45}
.tile .b ul{margin:10px 0 0;padding-left:1.1em;color:var(--dim);font-size:.85rem;line-height:1.4}
.tile .b .go{margin-top:auto;align-self:flex-start}
.tile.on .f{opacity:0;transform:translateY(-12px)}
.tile.on .b{opacity:1;transform:none;pointer-events:auto}
.tile.my{border-color:#5a4a22}

/* app detail panel */
.panel{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(3,5,9,.78);padding:16px}
.panel.open{display:flex;animation:fadein .25s}
.panel .box{width:min(760px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px}
.panel h2{display:flex;align-items:center;gap:14px}
.panel h2 .ic{width:48px;height:48px;color:var(--brass)}
.panel ul{color:var(--dim)}
.panel .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* phones */
@media (max-width:980px){
  .hero .wrap,.net,.md{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .day{grid-template-columns:1fr}.day div{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:620px){
  body{font-size:19px}
  section{padding:64px 0}
  .grid,.aud{grid-template-columns:1fr}
  .top nav{display:none}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile .f,.tile .b{padding:14px}
  .tile .f h3{font-size:1rem}.tile .f p{display:none}
  .tile .b p{font-size:.8rem}.tile .b ul{display:none}
  .tile .f .ic{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .flow.on,.playhead,.gear,.platter{animation:none!important}
  .door,.dial,.bolt,.arm{transition-duration:.25s!important}
}
.door.l{transform-origin:0% 50%}.door.r{transform-origin:100% 50%}
.dialg{transition:opacity .6s ease,transform .8s ease;transform-box:fill-box;transform-origin:center}
.gate.s2 .dialg{opacity:0;transform:scale(.6)}
.needle{transform-box:view-box;transform-origin:340px 62px;transform:rotate(-60deg);transition:transform 1s cubic-bezier(.3,1.6,.5,1)}
.gate.s1 .needle{transform:rotate(55deg)}

.tile .b .sm{display:none}
.tile .b .go{margin-top:auto;padding:10px 18px}
.gate.s3 .door{opacity:0;transition:transform 1.5s cubic-bezier(.6,.05,.25,1),opacity .9s ease}
.gate .puff{width:30px;height:30px;margin:-15px 0 0 -15px}
@media (max-width:620px){.tile .b .lg{display:none}.tile .b .sm{display:block;font-size:.85rem}.tile .b h3{font-size:.85rem}}
@media (min-width:621px) and (max-width:900px){.tile .b .lg{font-size:.82rem}}

/* ---------- v4: the main menu, DJ BOY SUITE +, pages, license wall ---------- */
.top{position:relative;z-index:40}
.top .wrap{flex-wrap:nowrap;position:relative}
.menubtn{display:none;margin-left:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 14px;font-weight:800;cursor:pointer}
.mainnav{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap;font-size:.95rem}
.mainnav>a,.suite>a{color:var(--dim);text-decoration:none;padding:8px 10px;border-radius:10px}
.mainnav>a:hover,.suite>a:hover,.mainnav a.on{color:var(--text)}
.mainnav a.on{background:#151d2e}
.suite{display:flex;align-items:center;gap:2px}
.suitebtn{background:linear-gradient(180deg,#1c2436,#141b2a);border:1px solid #3b3220;color:var(--brass2);border-radius:999px;padding:7px 14px;font-weight:900;letter-spacing:.06em;font-size:.82rem;cursor:pointer;white-space:nowrap}
.suitebtn:hover,.suitebtn[aria-expanded="true"]{border-color:var(--brass);background:#221d12}
.suitebtn .pm{display:inline-block;width:1em;text-align:center;font-size:1.05rem}
.suitebtn:focus-visible,.menubtn:focus-visible,.mainnav a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.suitemenu{position:absolute;left:16px;right:16px;top:calc(100% + 10px);background:#0f1522;border:1px solid #3b3220;border-radius:20px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.6);z-index:60}
.suitemenu[hidden]{display:none}
.suitehd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 4px 12px;color:var(--mute);font-size:.85rem}
.suitehd b{color:var(--brass2);letter-spacing:.16em;font-size:.9rem}
.suitegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.si{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;text-decoration:none;border:1px solid transparent}
.si:hover,.si:focus-visible{background:#151d2e;border-color:var(--line);outline:none}
.si .ic{width:30px;height:30px;color:var(--brass);flex:none}
.si b{display:block;font-size:.92rem;letter-spacing:.06em}.si small{display:block;color:var(--mute);font-size:.8rem}
.si.my b{color:var(--brass2)}

.page{border-top:0;padding:56px 0 72px}
.ph{font-size:clamp(2rem,4.6vw,3.3rem);letter-spacing:-.015em;margin:0 0 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ph .ic{width:52px;height:52px;color:var(--brass);flex:none}
a.card.link{display:block;text-decoration:none;transition:border-color .2s}
a.card.link:hover,a.card.link:focus-visible{border-color:var(--brass);outline:none}
.card .more,.more{display:inline-block;margin-top:12px;color:var(--brass2);font-weight:800;font-size:.9rem;text-decoration:none}
.appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:30px}
.appgrid .card p{font-size:.95rem}
.lockline{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:26px;border-color:#3b3220}
.lockline .ic{width:40px;height:40px;color:var(--brass);flex:none}
.lockline>div:nth-child(2){flex:1;min-width:220px;color:var(--dim)}
.lockline .row,.wall .row{display:flex;gap:10px;flex-wrap:wrap}
.crumbs{color:var(--mute);font-size:.88rem;margin:0 0 18px}.crumbs a{color:var(--dim)}.crumbs span{margin:0 6px}
.apphead{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start}
.shot{margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0b101b;box-shadow:0 26px 70px rgba(0,0,0,.45)}
.shot img{display:block;width:100%;height:auto}
.shot.tall{max-width:420px;justify-self:center}
.shot.art svg{display:block;width:100%;height:auto}
.shot figcaption{font-size:.8rem;color:var(--mute);padding:8px 14px;border-top:1px solid var(--line)}
.flowline{animation:dash 1.6s linear infinite}
.wall{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-top:34px;border-color:#5a4a22;background:linear-gradient(180deg,#17140d,#111827)}
.wallic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#f6dc8c,#c8a046 45%,#5e4318);color:#2a1d08}
.wallic .ic{width:32px;height:32px}
.walltx p{margin:0;color:var(--dim)}
.pn{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.cols3 h3,.cols2 h3{font-size:1.2rem;letter-spacing:0;margin-bottom:8px}
.quote{margin-top:22px;border-color:#3b3220}.quote p{font-size:1.15rem;color:var(--text);margin:0}
.note-inline{display:inline-block;margin-top:26px;padding:14px 22px;border:1px dashed var(--brass);border-radius:14px;color:var(--brass2);font-weight:700}
.brands{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.brand{display:flex;flex-direction:column;gap:14px;padding:28px}
.brand p{color:var(--dim);font-size:1rem}
.brand .btn{align-self:flex-start;margin-top:auto}
.bhead{display:flex;gap:16px;align-items:center}
.bhead h2{font-size:1.7rem}
.tagline{margin:4px 0 0!important;color:var(--brass2)!important;font-weight:700;font-size:.9rem!important}
.bmark{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;font-weight:900;letter-spacing:.06em;font-size:1.2rem;flex:none}
.bmark.md{background:linear-gradient(135deg,#c8a046,#7a5a22);color:#1a1307}
.bmark.pd{background:linear-gradient(135deg,#4fd1c5,#1f6f68);color:#06201d}
.uses{display:flex;gap:6px;flex-wrap:wrap}
.uses span{font-size:.72rem;letter-spacing:.12em;font-weight:800;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.btn.ghost{background:none;border-style:dashed;color:var(--mute);cursor:default}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:30px}
.artist{display:block;text-decoration:none}
.artist h3{font-size:1.25rem;letter-spacing:0}
.artist span{display:block;margin-top:8px;color:var(--mute);font-size:.9rem}
a.artist:hover{border-color:var(--brass)}a.artist:hover span{color:var(--brass2)}

@media (max-width:1100px){.mainnav{font-size:.9rem;gap:2px}.mainnav>a,.suite>a{padding:8px 7px}}
@media (max-width:980px){
  .apphead,.brands{grid-template-columns:1fr}
  .cols3{grid-template-columns:1fr 1fr}
  .wall{grid-template-columns:1fr}
}
@media (max-width:900px){
  .top .wrap{flex-wrap:wrap}
  .menubtn{display:inline-block}
  .demo-btn{display:none}
  .top nav.mainnav{display:none;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:2px;margin-top:10px;border-top:1px solid #141b2a;padding-top:10px}
  .top nav.mainnav.open{display:flex}
  .mainnav>a,.suite>a{padding:12px 10px;font-size:1.05rem}
  .suite{flex-wrap:wrap}
  .suite>a{flex:1}
  .suitemenu{position:static;flex-basis:100%;margin-top:8px;box-shadow:none;padding:12px}
  .suitegrid{grid-template-columns:1fr}
}
@media (max-width:620px){.cols3,.cols2{grid-template-columns:1fr}.page{padding:40px 0 56px}}
.walltx .eyebrow,.card .eyebrow{font-size:.74rem;color:var(--brass)}
@media (min-width:901px){.top nav.mainnav{flex-wrap:nowrap;gap:0;white-space:nowrap}.mainnav>a,.suite>a{padding:8px 9px}.top .demo-btn{padding:11px 18px;font-size:.92rem}}
@media (min-width:901px) and (max-width:1240px){.top .demo-btn{display:none}}

/* the speaker ball lock (orb.js) */
.stage{width:min(86vw,62vh,500px)}
.stage svg#orb{overflow:visible;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.gate .snd{position:absolute;top:14px;left:16px;background:none;border:1px solid #3a3222;border-radius:999px;padding:6px 14px;color:var(--brass2);cursor:pointer;font-size:.9rem}
.gate .snd[aria-pressed=false]{color:var(--dim)}
.minilock svg{width:48px;height:48px}
.minilock .gear.ccw{animation-play-state:running;animation-duration:6s}
.licwho{margin-left:auto;margin-right:12px;color:var(--brass2);font-weight:700;font-size:.9rem}
.tile.locked{opacity:.55}
.tile.locked .f h3::after{content:" 🔒";font-size:.8em}
.tile.locked .go{background:transparent;color:var(--dim);border:1px solid var(--line)}
/* bottom entrance: the moving gear ball, click to enter (DJBOY 11-11) */
.entrance{padding:56px 0 64px;text-align:center;border-top:1px solid #1d2638}
.bigorb{display:inline-flex;flex-direction:column;align-items:center;gap:12px;background:none;border:0;cursor:pointer;color:var(--brass2);padding:12px 24px;border-radius:24px}
.bigorb svg{width:200px;height:220px;overflow:visible;filter:drop-shadow(0 10px 30px rgba(200,160,70,.25));transition:transform .3s}
.bigorb:hover svg,.bigorb:focus-visible svg{transform:scale(1.04)}
.bigorb b{font-size:1.5rem;letter-spacing:.22em;color:var(--brass)}
.bigorb span{color:var(--dim,#B9C0CE);font-size:1rem}
.entrance .gear.cw,.entrance .gear.ccw{animation-play-state:running;animation-duration:8s}
.bigorb:hover .gear.cw,.bigorb:hover .gear.ccw{animation-duration:2.5s}
.flinks{display:flex;flex-wrap:wrap;gap:6px 18px}.flinks a{color:inherit;opacity:.85}.flinks a:hover{opacity:1;color:var(--brass)}
@media (prefers-reduced-motion:reduce){.entrance .gear.cw,.entrance .gear.ccw{animation:none}}
/* flipped tile: the text clamps so the Enter button always fits inside the square (Billy 11-12: STUDIO's Enter was pushed out) */
.tile .b{overflow:hidden}
.tile .b h3{flex:none}
.tile .b .lg{flex:0 1 auto;min-height:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6}
.tile .b .go{flex:none;margin-top:auto;position:relative;z-index:2}
@media (min-width:621px) and (max-width:900px){.tile .b .lg{-webkit-line-clamp:5}}
@media (max-width:620px){.tile .b .lg{display:none}.tile .b .sm{flex:0 1 auto;min-height:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}}
/* room tiles: icon + words sit in the middle of the card (Billy 11-12) */
.tile .f{align-items:center;justify-content:center;text-align:center}
.tile .f h3{margin-top:14px}
.tile .f p{max-width:22ch}