/* SHYNOX official website – Next-Gen
   One idea: the official artwork is a living stage behind the whole page. The page scrolls like one camera move through the
   tunnel (hero, close-up for About, down the tunnel for the music links, warm gold light for business), and everything that
   moves is light: the tunnel lamps, the eyes, the key light, the gold of the lettering. The interface stays calm and clear.
   Without WebGL (or with reduced motion) the same stage shows the still artwork with gentle framing changes. */
:root{
  --void:#010405;                         /* deep black of the tunnel at night */
  --steel:#0a2a2d;                        /* dark turquoise steel of the cage */
  --panel:rgba(2,10,12,.78);
  --line:rgba(120,240,230,.15);--line-strong:rgba(120,240,230,.38);
  --cyan:#3de8e0;                         /* controlled neon: interaction and focus */
  --lamp:#d6fcf7;                         /* fluorescent tube light */
  --gold:#d9a441;--gold-hi:#f6de9c;--gold-lo:#8a621e;
  --text:#eef6f5;--soft:#c8dbda;--mute:#8fa8a8;
  --font:"Avenir Next","Segoe UI Variable","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  --gold-grad:linear-gradient(180deg,#fdebb8 0%,#ecc56e 38%,#b8862c 50%,#e2b45a 62%,#9c7223 100%);   /* soft metal horizon */
  --tube:0 0 6px rgba(214,252,247,.9),0 0 18px 2px rgba(61,232,224,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-sweep:cubic-bezier(.65,0,.35,1);
  --header:64px;
  /* side margin; on phones in landscape it also keeps clear of the notch and the rounded corners */
  --gutter:max(1.25rem,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  /* one width for the header and the content, so logo and menu line up with the text below at every size */
  --page:min(1240px,100% - 2 * var(--gutter));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--void);scroll-padding-top:calc(var(--header) + env(safe-area-inset-top,0px) + 1rem);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;color:var(--text);font:400 1rem/1.65 var(--font);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#000;padding:.6rem 1rem;z-index:80;border-radius:4px;font-weight:700}
.skip:focus{left:8px}
[dir=rtl] .skip{left:auto;right:-999px}
[dir=rtl] .skip:focus{right:8px}
.wrap{width:var(--page);margin-inline:auto}
svg.mark{fill:currentColor}
svg.line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the stage: fixed behind the page. Still artwork first (also the largest image for loading), the animated
   picture (canvas, added by site.js) on top once it runs, a dark curtain for the opening ---------- */
.stage{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;overflow:hidden;background:var(--void);pointer-events:none}
.stage>img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform-origin:42% 44%;transition:transform 1.6s var(--ease-out)}
.stage>canvas{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:2;width:100%;height:100%;opacity:0;transition:opacity .45s ease}
.sx .stage>canvas{opacity:1}
.stage::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:1;background:var(--void);opacity:0}
.stage::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:3;background:rgba(1,4,5,0);transition:background-color 1.2s ease}
/* still artwork: framing per chapter (the animated picture frames itself) */
.stage[data-look=about]>img{transform:scale(1.18) translate3d(-3%,3%,0)}
.stage[data-look=music]>img{transform:scale(1.32) translate3d(-11%,6%,0)}
.stage[data-look=business]>img{transform:scale(1.08) translate3d(-1%,1%,0)}
/* computer layout (computers, tablets in landscape, phones in desktop mode, upright screens at least 900 wide): the still
   artwork keeps its size and place too (only a hint of movement) */
@media (min-width:900px) and (min-height:521px),(min-width:960px){
  .stage[data-look=about]>img{transform:scale(1.04) translate3d(-1.5%,.5%,0)}
  .stage[data-look=music]>img{transform:scale(1.035) translate3d(-1%,.5%,0)}
  .stage[data-look=business]>img{transform:scale(1.025) translate3d(-.5%,.3%,0)}
}
.stage[data-look=about]::after{background:rgba(1,4,5,.28)}
.stage[data-look=music]::after{background:rgba(1,4,5,.62)}
.stage[data-look=business]::after{background:rgba(1,4,5,.55)}
.sx .stage::after{background:rgba(1,4,5,0)}
.sx .stage[data-look=music]::after,.sx .stage[data-look=business]::after{background:rgba(1,4,5,.18)}

/* ---------- header: transparent over the artwork at the top, solid once the page moves ---------- */
header.top{position:fixed;top:0;right:0;left:0;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(1,6,7,.94);border-bottom:1px solid var(--line);transition:background-color .4s,border-color .4s}
header.top.atop{background:rgba(1,6,7,0);border-bottom-color:transparent}
header.top::before{content:"";position:absolute;top:0;right:0;bottom:-28px;left:0;inset:0 0 -28px;z-index:-1;background:linear-gradient(180deg,rgba(1,4,5,.72),rgba(1,4,5,0));opacity:0;transition:opacity .4s;pointer-events:none}
header.top.atop::before{opacity:1}
.bar{display:flex;align-items:center;gap:.6rem;height:var(--header);width:var(--page);margin-inline:auto}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;text-decoration:none;font-weight:800;letter-spacing:.3em;font-size:.95rem}
/* the lettering block keeps its left-to-right order (dir=ltr), so its free space is set on the physical side: in Arabic
   the logo and lettering sit at the right edge and the menu at the left */
[dir=rtl] .brand{margin-right:0;margin-left:auto}
.logo{width:var(--logo,40px);height:var(--logo,40px);border-radius:50%;object-fit:cover;aspect-ratio:1;box-shadow:0 0 0 1px rgba(217,164,65,.6)}
.dnav{display:flex;gap:clamp(1.3rem,2.4vw,2.4rem)}
.dnav a{position:relative;min-width:2.75rem;padding:.7rem 0;text-align:center;text-decoration:none;color:var(--soft);font-size:.95rem;font-weight:600;letter-spacing:.01em;transition:color .2s}
.dnav a::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:2px;border-radius:2px;background:var(--lamp);box-shadow:var(--tube);opacity:0;transform:scaleX(.35);transition:opacity .25s,transform .35s var(--ease)}
.dnav a[aria-current]{color:var(--text)}
.dnav a[aria-current]::after{opacity:1;transform:none}
#burger{display:none;flex:none;width:46px;height:46px;border:1px solid var(--line);background:rgba(1,6,7,.4);border-radius:12px;color:var(--text);position:relative;cursor:pointer}
#burger i,#burger::before,#burger::after{content:"";position:absolute;left:13px;right:13px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
#burger::before{top:16px}#burger i{top:22px}#burger::after{top:28px}
#burger[aria-expanded=true]::before{transform:translateY(6px) rotate(45deg)}
#burger[aria-expanded=true]::after{transform:translateY(-6px) rotate(-45deg)}
#burger[aria-expanded=true] i{opacity:0}

/* ---------- mobile menu ---------- */
#menu{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:40;background:linear-gradient(180deg,rgba(1,5,6,.93) 0%,rgba(2,9,11,.985) 34%,#030d0f 56%);padding:calc(var(--header) + env(safe-area-inset-top,0px) + 1.25rem) max(1.5rem,env(safe-area-inset-right,0px)) calc(1.5rem + env(safe-area-inset-bottom,0px)) max(1.5rem,env(safe-area-inset-left,0px));display:flex;flex-direction:column;justify-content:space-between;gap:2rem;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
#menu.open{opacity:1;visibility:visible;transition:opacity .3s}
.mlinks{display:flex;flex-direction:column}
.mlinks a{position:relative;display:flex;align-items:center;min-height:64px;padding:.4rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);font-size:clamp(1.7rem,8vw,2.4rem);font-weight:800;line-height:1.1;letter-spacing:.01em}
.mlinks a::after{content:"";position:absolute;left:0;bottom:-1px;width:3rem;height:2px;border-radius:2px;background:var(--lamp);box-shadow:var(--tube);opacity:0;transition:opacity .2s}
.mlinks a:active::after,.mlinks a:focus-visible::after{opacity:1}
.mlinks a:active{color:var(--gold-hi)}
.msocial{border-top:1px solid var(--line);padding-top:1.5rem}
.mhead{margin:0 0 1rem;color:var(--mute);font-size:.85rem;font-weight:600;text-align:center}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem .25rem;list-style:none;margin:0 auto;padding:0;max-width:22rem}
.mgrid li{display:flex;justify-content:center;min-width:0}
.sb{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%;text-decoration:none;color:var(--cyan);-webkit-tap-highlight-color:transparent}
.sbi{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;background:rgba(61,232,224,.04);transition:border-color .2s,background .2s,transform .15s var(--ease)}
.sbi svg{width:23px;height:23px}
.sbl{font-size:.68rem;font-weight:600;letter-spacing:.02em;line-height:1.2;color:var(--mute);text-align:center;min-height:2.4em;max-width:100%}
.sb:active .sbi{transform:scale(.94);background:rgba(61,232,224,.12)}
.sb.mailto{color:var(--gold-hi)}
.sb.mailto .sbi{border-color:rgba(217,164,65,.7);background:rgba(217,164,65,.08)}
.sb.mailto .sbl{color:var(--gold-hi)}
@media (prefers-reduced-motion:no-preference){
  #menu.open .mlinks a{animation:menu-in .5s var(--ease-out) backwards}
  #menu.open .mlinks a:nth-child(2){animation-delay:.05s}
  #menu.open .mlinks a:nth-child(3){animation-delay:.1s}
}

/* ---------- language switcher: plain links in a native details element, so it also works without JavaScript ---------- */
.lang{position:relative;margin-inline-start:1.2rem;padding-inline-start:1.2rem;border-inline-start:1px solid var(--line)}
.lang>summary,.mlang summary{list-style:none;display:flex;align-items:center;gap:.45rem;cursor:pointer}
.lang>summary::-webkit-details-marker,.mlang summary::-webkit-details-marker{display:none}
.lang>summary{min-height:44px;color:var(--soft);font-size:.85rem;font-weight:700;letter-spacing:.12em;transition:color .2s}
.lang[open]>summary{color:var(--gold-hi)}
.lang svg,.mlang svg{width:18px;height:18px;flex:none}
.lang .chev,.mlang .chev{width:14px;height:14px}
.lang[open] .chev,.mlang details[open] .chev{transform:rotate(180deg)}
.langlist{position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:60;min-width:13.5rem;max-height:calc(100vh - var(--header) - env(safe-area-inset-top,0px) - 1.5rem);max-height:calc(100dvh - var(--header) - env(safe-area-inset-top,0px) - 1.5rem);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:.4rem;list-style:none;background:rgba(2,8,10,.97);border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 22px 50px rgba(0,0,0,.6)}
.langlist a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;padding:0 .85rem;border-radius:5px;color:var(--soft);text-decoration:none;font-size:.95rem}
.langlist a[aria-current],.mlang-grid a[aria-current]{color:var(--gold-hi)}
.lang .ok,.mlang .ok{width:16px;height:16px;color:var(--gold-hi)}
.mlang{border-top:1px solid var(--line);padding-top:1.5rem}
.mlang details{max-width:22rem;margin-inline:auto}
.mlang summary{width:fit-content;margin-inline:auto;min-height:44px;padding:0 1.1rem;border:1px solid var(--line);border-radius:6px;color:var(--soft);font-size:.9rem;font-weight:600}
.mlang summary>svg:first-child{color:var(--cyan)}
.mlang-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.mlang-grid a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.3rem .6rem;border:1px solid var(--line);border-radius:6px;color:var(--soft);text-decoration:none;font-size:.92rem;line-height:1.25;text-align:center;text-wrap:balance}
.mlang-grid a[aria-current]{border-color:rgba(217,164,65,.7);background:rgba(217,164,65,.08)}
.mlang-grid a:active{background:rgba(61,232,224,.08)}

/* ---------- hero: the title card at the bottom of the frame, the face always clear ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.herotxt{position:relative;padding:0 var(--gutter) calc(clamp(1.6rem,5.5vh,3.6rem) + env(safe-area-inset-bottom,0px));text-align:center}
.herotxt::before{content:"";position:absolute;top:-32vh;right:0;bottom:0;left:0;inset:-32vh 0 0;z-index:-1;background:linear-gradient(0deg,rgba(1,4,5,.88) 0%,rgba(1,4,5,.6) 38%,rgba(1,4,5,0) 100%);pointer-events:none}
/* the shade does not end in a straight line under the title: it fades out below the hero, and it thins out while the hero
   leaves the screen (site.js sets --hx from 0 at the top to 1 once the hero is gone), so no dark band slides over the artwork */
.herotxt::after{content:"";position:absolute;top:100%;right:0;left:0;height:24vh;z-index:-1;background:linear-gradient(180deg,rgba(1,4,5,.88) 0%,rgba(1,4,5,.56) 30%,rgba(1,4,5,.2) 66%,rgba(1,4,5,0) 100%);pointer-events:none}
.herotxt::before,.herotxt::after{opacity:calc(1 - var(--hx,0));will-change:opacity}
h1{margin:0;font-weight:800;line-height:.86;color:var(--gold-hi)}
/* the place of the light on the gold lettering (set by site.js from the mouse or finger); registered so it glides */
@property --gx{syntax:"<percentage>";inherits:false;initial-value:100%}
.hero h1{width:fit-content;margin-inline:auto;font-size:min(16vw,22vh,13.5rem);letter-spacing:.17em;padding-inline-start:.17em;
  background-image:linear-gradient(100deg,rgba(255,240,200,0) 40%,rgba(255,244,214,.18) 45.5%,rgba(255,250,232,.85) 50%,rgba(255,244,214,.18) 54.5%,rgba(255,240,200,0) 60%),var(--gold-grad);
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:var(--gx,100%) 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 30px rgba(0,0,0,.75));transition:--gx .35s var(--ease)}
.hero-foot{display:flex;flex-direction:column;align-items:center;gap:1.15rem;margin-top:clamp(.9rem,2.6vh,1.7rem)}
.tag{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:.3em;margin:0;color:var(--soft);font-size:clamp(.84rem,3.5vw,1.05rem);font-weight:600;letter-spacing:.06em;line-height:1.4}
.tag span{white-space:nowrap}
.tag i{display:block;flex:none;width:.34em;height:.34em;margin:0 .75em;background:var(--gold);transform:rotate(45deg)}
/* narrow screens: two balanced lines, never a diamond at the start or end of a line */
@media (max-width:599px),(orientation:landscape) and (max-height:520px){.tag i:nth-of-type(2){flex-basis:100%;width:auto;height:0;margin:0;background:none;transform:none}}
@media (max-width:359px){.tag{font-size:.8rem}}
.hero .btn{min-width:min(17rem,100%)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.75rem 1.75rem;border-radius:4px;border:1px solid rgba(217,164,65,.62);text-decoration:none;font:700 .98rem/1.2 var(--font);letter-spacing:.02em;color:var(--gold-hi);background:rgba(1,6,7,.45);transition:transform .2s var(--ease),box-shadow .25s,border-color .2s,background-color .2s}
.btn.main{overflow:hidden;isolation:isolate;border-color:transparent;color:#140c00;background:linear-gradient(180deg,#fbe5a8,#dcab4c 58%,#b98a2e);box-shadow:0 12px 34px rgba(217,164,65,.2),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.main::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:34%;z-index:-1;background:linear-gradient(100deg,rgba(255,250,235,0),rgba(255,250,235,.75) 50%,rgba(255,250,235,0));transform:translateX(-170%) skewX(-20deg);pointer-events:none}
.btn:active,.btn.press{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- chapters ---------- */
.chapter{position:relative}
h2{margin:0 0 1.5rem;font-weight:800;font-size:clamp(2.4rem,9vw,5.4rem);line-height:.92;letter-spacing:.015em;text-transform:uppercase;color:var(--text);text-shadow:0 4px 30px rgba(0,0,0,.6)}
h2::after{content:"";display:block;width:3.4rem;height:2px;margin-top:1.1rem;border-radius:2px;background:var(--lamp);box-shadow:var(--tube)}

/* about follows the title card directly and is as tall as its text (no empty stretch); on phones the mask stays in view
   above the text while it rises, the shade behind the text starts softly */
.about{display:flex;align-items:flex-start;padding:clamp(3.5rem,9vh,5rem) 0 clamp(2rem,5vh,3rem)}
.about::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:linear-gradient(180deg,rgba(1,4,5,0),rgba(1,4,5,.74) 6vh,rgba(1,4,5,.92) 16vh);pointer-events:none}
.about .wrap{position:relative}
.about-text{max-width:35rem}
.about-text p{margin:0 0 1.6rem;font-size:clamp(1.02rem,.45vw + .92rem,1.22rem);line-height:1.75;color:var(--soft)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.chips li{padding:.38rem .9rem;border:1px solid rgba(217,164,65,.45);border-radius:3px;font-size:.84rem;font-weight:700;letter-spacing:.03em;color:var(--gold-hi);background:rgba(1,6,7,.55);white-space:nowrap}

/* connect: follow (TikTok, Instagram), listen (streaming and YouTube), then business */
.connect{padding:clamp(2.5rem,6vh,4.5rem) 0 0}
.connect::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:linear-gradient(180deg,rgba(1,4,5,.94),rgba(1,4,5,.5) 16vh,rgba(1,4,5,.5) 82%,rgba(1,4,5,.85));pointer-events:none}
.connect .wrap{position:relative}
.deck{display:grid;gap:2rem}
.grp{min-width:0;display:flex;flex-direction:column}
.glabel{margin:0 0 .75rem;color:var(--mute);font-size:.95rem;font-weight:600}
.tiles,.rows{list-style:none;margin:0;padding:0}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;flex:1}
.tiles>li,.rows>li{display:flex;min-width:0}
.ic{position:relative;isolation:isolate;flex:1;min-width:0;text-decoration:none;color:var(--text);-webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease),border-color .2s,background-color .2s}
.ic svg.mark{flex:none;color:var(--cyan);transition:color .2s}
.tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.2rem;min-height:140px;padding:1.05rem 1rem 1rem;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.tile svg.mark{width:30px;height:30px;margin-bottom:auto}
.tile .tx{display:flex;flex-direction:column;gap:.15rem;min-width:0;max-width:100%}
.tile .nm{font-size:1.2rem;font-weight:800;line-height:1.2}
.tile .hd{max-width:100%;color:var(--mute);font-size:.8rem;font-weight:600;overflow-wrap:anywhere}
.tile .go{position:absolute;top:1.15rem;right:1rem}
/* Follow starts with YouTube: on phones and tablets it is the wide card across both columns (same card design laid out
   in a row), TikTok and Instagram stand side by side below it; on computers the three cards stack beside Listen */
@media (max-width:899px){
  .tiles>li:first-child{grid-column:1/-1}
  .tiles>li:first-child .tile{min-height:76px;flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;padding:.9rem 1rem}
  .tiles>li:first-child .tile svg.mark{width:30px;height:30px;margin:0}
  .tiles>li:first-child .tile .tx{flex:1}
  .tiles>li:first-child .tile .go{position:static}
}
@media (min-width:600px) and (max-width:899px){.tiles>li:first-child .tile{min-height:84px;padding:1.1rem 1.25rem}}
.rows{border:1px solid var(--line);border-radius:6px;background:var(--panel);overflow:hidden}
.rows>li+li{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:1rem;min-height:64px;padding:.5rem 1.1rem}
.row svg.mark{width:24px;height:24px}
.row .nm{flex:1;font-size:1.06rem;font-weight:700;line-height:1.25}
.ic .go{flex:none;width:16px;height:16px;fill:var(--gold);opacity:.8;transition:transform .25s var(--ease),opacity .2s}
/* the edge light follows the mouse; a touch lights the card where the finger is */
.ic::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(61,232,224,.13),transparent 70%)}
/* fluorescent tube along the lower edge: switches on with a short flicker */
.ic::after{content:"";position:absolute;left:1rem;right:1rem;bottom:-1px;height:2px;border-radius:2px;background:var(--lamp);box-shadow:var(--tube);opacity:0;pointer-events:none}
.ic.lit::before,.ic:focus-visible::before{opacity:1}
.ic.lit::after,.ic:focus-visible::after{opacity:1}
.ic:active,.ic.lit{transform:scale(.985);background:rgba(61,232,224,.07)}
.ic:focus-visible{outline-offset:-3px}

/* business inquiries: the one gold panel of the page */
.biz{position:relative;margin-top:clamp(2.25rem,5vh,3.5rem);display:grid;gap:1.4rem;padding:1.6rem 1.25rem 1.4rem;border:1px solid rgba(217,164,65,.4);border-radius:6px;background:linear-gradient(160deg,rgba(54,37,9,.6),rgba(3,10,12,.86) 58%)}
.biz::before{content:"";position:absolute;left:1.25rem;top:-1px;width:4rem;height:2px;border-radius:2px;background:var(--gold-hi);box-shadow:0 0 14px 1px rgba(246,222,156,.55)}
.biz h3{margin:0 0 .45rem;font-size:clamp(1.12rem,4.9vw,1.85rem);font-weight:800;line-height:1.2;letter-spacing:.01em;color:var(--gold-hi)}
.biz p{margin:0;color:var(--soft);font-size:.98rem;line-height:1.6;max-width:46ch}
.biz-act{display:flex;flex-direction:column;align-items:stretch;gap:1.2rem;min-width:0}
.mail{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.mail-row{display:flex;align-items:center;gap:.6rem;max-width:100%;min-width:0}
.mail svg{width:22px;height:22px;color:var(--cyan);flex:none}
/* the envelope opens the email app too; invisible 44 px touch area, same look and spacing */
.mail a.mail-icon{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;margin:-11px;border-radius:50%;-webkit-tap-highlight-color:transparent}
.mail a.addr{min-width:0;text-align:start;color:var(--text);font-size:clamp(1.02rem,1.2vw + .7rem,1.3rem);font-weight:700;overflow-wrap:anywhere;text-underline-offset:4px;text-decoration-color:rgba(217,164,65,.55)}
@media (max-width:359px){
  .mail a.addr{font-size:.92rem}
  .biz{padding-inline:1rem}
  .biz .btn{padding-inline:.75rem;font-size:.92rem}
  /* the smallest phones: Follow cards as full-width rows, so the handle never breaks */
  .tiles{grid-template-columns:1fr}
  .tile{min-height:76px;flex-direction:row;align-items:center;justify-content:flex-start;gap:1rem;padding:.9rem 1rem}
  .tile svg.mark{width:28px;height:28px;margin:0}
  .tile .tx{flex:1}
  .tile .go{position:static}
}
.cp{position:relative;min-height:40px;padding:.3rem .95rem;border:1px solid var(--line-strong);border-radius:4px;background:transparent;color:var(--gold-hi);font:600 .8rem var(--font);letter-spacing:.03em;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.cp:active{transform:scale(.96);background:rgba(61,232,224,.08)}
/* invisible 2 px above and below: the touch area is 44 px high while the button still looks 40 px high */
.cp::after{content:"";position:absolute;inset:-3px 0}
.biz .btn{width:100%}

/* voluntary support: a quiet outline button below Business Inquiries, plain external link (no PayPal script) */
.support{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:clamp(2.25rem,5vh,3.5rem) 0 clamp(2rem,5vh,3rem);text-align:center}
.support p{margin:0;color:var(--mute);font-size:.92rem;line-height:1.55;max-width:44ch}
.support .btn{min-height:48px;border-color:rgba(217,164,65,.5);background:rgba(1,6,7,.6)}
.support .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}

footer{position:relative;border-top:1px solid var(--line);background:rgba(1,4,5,.9);padding:1.4rem 0 calc(1.4rem + env(safe-area-inset-bottom,0px));color:var(--mute);font-size:.85rem;text-align:center}

/* 404 page */
/* privacy policy link right below the copyright line: small, quiet gold */
.flink{display:flex;align-items:center;justify-content:center;width:fit-content;min-height:44px;margin:.15rem auto -.55rem;padding:0 .6rem;color:rgba(217,164,65,.82);font-size:.78rem;font-weight:600;letter-spacing:.05em;text-decoration:none;text-underline-offset:4px;transition:color .2s}
.flink:hover,.flink:focus-visible{color:var(--gold-hi);text-decoration:underline;text-decoration-color:rgba(217,164,65,.55)}
:lang(ar) .flink{letter-spacing:0}

/* ---------- privacy notice: compact card at the bottom, dark with quiet gold; both choices look and work the same ---------- */
.consent{position:fixed;z-index:70;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));
  margin-inline:auto;max-width:27rem;padding:1.1rem 1.15rem .55rem;border:1px solid rgba(217,164,65,.38);border-radius:16px;
  background:linear-gradient(160deg,rgba(18,14,6,.97),rgba(3,10,12,.97) 55%);box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(246,222,156,.08);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text)}
.consent.out{opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.cs-title{margin:0 0 .35rem;color:var(--gold-hi);font-size:1.02rem;font-weight:800;line-height:1.3;letter-spacing:.01em}
.cs-text{margin:0 0 .9rem;color:var(--soft);font-size:.9rem;line-height:1.5}
.cs-btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cs-btn{min-height:48px;padding:.6rem .8rem;border-color:rgba(217,164,65,.6);background:rgba(217,164,65,.1);color:var(--gold-hi);font-size:.92rem;border-radius:10px}
.cs-links{display:flex;justify-content:center;gap:1.4rem;margin:.35rem 0 0}
.cs-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 .2rem;border:0;background:none;color:var(--mute);font:600 .8rem var(--font);text-decoration:underline;text-decoration-color:rgba(143,168,168,.45);text-underline-offset:4px;cursor:pointer}
.cs-link:hover,.cs-link:focus-visible{color:var(--gold-hi)}
@media (min-width:821px){.consent{left:max(24px,env(safe-area-inset-left,0px));right:auto;bottom:24px;margin:0;width:26rem}
  [dir=rtl] .consent{left:auto;right:max(24px,env(safe-area-inset-right,0px))}}
@media (prefers-reduced-motion:no-preference){.consent:not(.out){animation:sheetup .45s var(--ease-out) both}}
@keyframes sheetup{from{opacity:0;transform:translateY(16px)}}
/* phones held sideways: one wide, low card - text beside the choices */
@media (orientation:landscape) and (max-height:520px){
  .consent,[dir=rtl] .consent{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;max-width:46rem;margin-inline:auto;
    display:grid;grid-template-columns:minmax(0,1fr) 16rem;grid-template-areas:"t b" "x b" "x l";column-gap:1.1rem;align-items:center;padding:.75rem 1rem .25rem}
  .consent .cs-title{grid-area:t;margin-bottom:.2rem}
  .consent .cs-text{grid-area:x;margin:0 0 .5rem;font-size:.84rem;line-height:1.45}
  .consent .cs-btns{grid-area:b}
  .consent .cs-links{grid-area:l;margin:0}
}
@media (max-width:359px){.consent{padding:.9rem .9rem .4rem}.cs-title{font-size:.96rem}.cs-text{font-size:.84rem;margin-bottom:.75rem}.cs-btn{font-size:.86rem;padding:.5rem .5rem}.cs-links{gap:.9rem}.cs-link{font-size:.76rem}}
/* settings */
.cs-dialog{width:min(30rem,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:1.4rem 1.3rem 1.2rem;border:1px solid rgba(217,164,65,.4);border-radius:18px;
  background:linear-gradient(160deg,rgba(18,14,6,.98),rgba(3,10,12,.98) 55%);color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.7)}
.cs-dialog::backdrop{background:rgba(1,4,5,.72)}
.cs-dialog .cs-title{margin:0 2.8rem .5rem 0;font-size:1.2rem;line-height:1.3;text-transform:none;text-shadow:none;letter-spacing:.01em}
.cs-dialog h2::after,.legal h2::after{content:none}
[dir=rtl] .cs-dialog .cs-title{margin:0 0 .5rem 2.8rem}
.cs-x{position:absolute;top:.6rem;inset-inline-end:.6rem;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--mute);font-size:1.6rem;line-height:1;cursor:pointer}
.cs-x:hover,.cs-x:focus-visible{color:var(--gold-hi)}
.cs-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;border-top:1px solid var(--line);cursor:pointer}
.cs-row-tx{display:flex;flex-direction:column;gap:.2rem;font-size:.86rem;line-height:1.45;color:var(--soft)}
.cs-row-tx strong{color:var(--text);font-size:.95rem}
.cs-always{flex:none;color:var(--mute);font-size:.8rem;font-weight:600}
.cs-switch{flex:none;appearance:none;-webkit-appearance:none;width:52px;height:30px;margin:0;border:1px solid rgba(217,164,65,.55);border-radius:30px;background:rgba(1,6,7,.6);position:relative;cursor:pointer;transition:background-color .2s}
.cs-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--mute);transition:transform .2s var(--ease),background-color .2s}
.cs-switch:checked{background:rgba(217,164,65,.28)}
.cs-switch:checked::after{transform:translateX(22px);background:var(--gold-hi)}
[dir=rtl] .cs-switch::after{left:auto;right:3px}
[dir=rtl] .cs-switch:checked::after{transform:translateX(-22px)}
.cs-save{width:100%;margin-top:.9rem;border-radius:10px;border-color:rgba(217,164,65,.6);background:rgba(217,164,65,.1);color:var(--gold-hi)}
:lang(ar) :is(.cs-title,.cs-btn,.cs-link,.cs-save){letter-spacing:0}

/* ---------- privacy policy page ---------- */
.legal{padding:calc(var(--header) + env(safe-area-inset-top,0px) + clamp(2rem,6vh,3.5rem)) 0 clamp(2.5rem,7vh,4rem)}
.legal-wrap{max-width:46rem}
.legal h1{margin:0 0 .4rem;font-size:clamp(1.65rem,6.4vw,3.2rem);overflow-wrap:anywhere;hyphens:auto;font-weight:800;line-height:1.05;letter-spacing:.01em;color:var(--text)}
.legal h2{margin:2.2rem 0 .7rem;font-size:clamp(1.12rem,2.6vw,1.35rem);font-weight:800;line-height:1.3;letter-spacing:.01em;text-transform:none;text-shadow:none;color:var(--gold-hi)}
.legal p,.legal li{color:var(--soft);font-size:clamp(.98rem,.3vw + .9rem,1.08rem);line-height:1.7}
.legal p{margin:0 0 .9rem}
.legal ul{margin:0 0 1rem;padding-inline-start:1.2rem}
.legal li{margin:.3rem 0}
.legal a{color:var(--gold-hi);text-underline-offset:3px;text-decoration-color:rgba(217,164,65,.5);overflow-wrap:anywhere}
.legal strong{color:var(--text)}
.legal-date{color:var(--mute)!important;font-size:.9rem!important}
.legal-note{padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;color:var(--mute)!important;font-size:.9rem!important}
.legal-summary{margin:1.4rem 0 1rem;padding:1.1rem 1.2rem .4rem;border:1px solid rgba(217,164,65,.35);border-radius:14px;background:rgba(217,164,65,.05)}
.legal-lead{margin:0 0 .4rem!important;color:var(--gold-hi)!important;font-weight:800}
.legal-choice{margin-top:2.6rem;padding:1.3rem 1.2rem .6rem;border:1px solid rgba(217,164,65,.38);border-radius:16px;background:linear-gradient(160deg,rgba(18,14,6,.6),rgba(3,10,12,.6) 55%)}
.legal-choice h2{margin-top:0}
.legal-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:26rem}
.legal-actions .btn{min-height:48px;padding:.6rem .8rem;border-radius:10px;border-color:rgba(217,164,65,.6);background:rgba(217,164,65,.1);color:var(--gold-hi);font-size:.92rem}
.legal .legal-actions .btn[aria-pressed=true]{border-color:transparent;color:#140c00;background:linear-gradient(180deg,#fbe5a8,#dcab4c 58%,#b98a2e)}
.legal .legal-saved{margin:.85rem 0 0;color:var(--gold-hi);font-weight:700;font-size:.95rem;line-height:1.5}
.legal .legal-saved:empty{margin:0}
@media (prefers-reduced-motion:no-preference){.legal .legal-saved.show{animation:saved-in .35s ease}}
@keyframes saved-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.legal .legal-back{margin-top:2rem}
.legal-page .bar{justify-content:space-between}
/* reading pages: the fixed header is opaque, so the text scrolling underneath never shows through it */
.legal-page header.top,.legal-page header.top.atop{background:#010607;border-bottom-color:var(--line)}
.legal-page header.top::before{content:none}
@media (max-width:820px){.legal-page .lang{display:block}}
:lang(ar) .legal :is(h1,h2){letter-spacing:0}
:lang(ar) .legal :is(p,li){line-height:1.9}
:lang(ja) .legal :is(p,li){line-height:1.9}
.notfound{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding-top:var(--header)}
.notfound h1{font-size:clamp(1.8rem,7vw,2.8rem);letter-spacing:.04em;color:var(--text)}
.notfound p{color:var(--mute);margin:.75rem 0 1.5rem}

/* ---------- hover only where a mouse exists, so touches never leave cards stuck in hover state ---------- */
@media (hover:hover) and (pointer:fine){
  .ic:hover::before,.ic:hover::after{opacity:1}
  .ic:hover{background:rgba(61,232,224,.05)}
  .ic:hover svg.mark{color:var(--lamp)}
  .ic:hover .go{opacity:1;transform:translateX(3px)}
  .tile:hover{border-color:var(--line-strong)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(217,164,65,.28)}
  .btn:not(.main):hover{border-color:var(--gold-hi);background:rgba(217,164,65,.08)}
  .cp:hover{border-color:var(--cyan);background:rgba(61,232,224,.07)}
  .sb:hover .sbi{border-color:var(--cyan);background:rgba(61,232,224,.08)}
  .sb.mailto:hover .sbi{border-color:var(--gold-hi);background:rgba(217,164,65,.14)}
  .dnav a:hover{color:var(--text)}
  .dnav a:hover::after{opacity:.75;transform:none}
  .lang>summary:hover{color:var(--gold-hi)}
  .langlist a:hover{background:rgba(61,232,224,.08);color:var(--text)}
  .mlang-grid a:hover,.mlang summary:hover{border-color:var(--line-strong)}
}

/* ---------- layout ---------- */
@media (max-width:820px){
  .dnav{display:none}
  #burger{display:block}
  /* phones and small tablets: the language switcher sits right before the menu button (globe, language code, arrow), the
     same control as on computers; its list opens as a panel under the header bar, aligned with the menu button */
  .bar{position:relative}
  .lang{position:static;margin:0;padding:0;border:0}
  .lang>summary{gap:.4rem;height:46px;line-height:1;padding:0 .72rem 0 .66rem;border:1px solid var(--line);border-radius:12px;background:rgba(1,6,7,.4);color:var(--text);font-size:.8rem;letter-spacing:.1em;transition:color .2s,border-color .2s,background-color .2s}
  .lang>summary>svg:first-child{color:var(--cyan)}
  .lang .chev{width:12px;height:12px;opacity:.75;transition:transform .25s var(--ease)}
  .lang[open]>summary{border-color:var(--line-strong);background:rgba(61,232,224,.07);color:var(--gold-hi)}
  .langlist{top:calc(100% + 8px);width:min(100%,21rem);min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;padding:.6rem;border-radius:12px;background:linear-gradient(180deg,rgba(4,16,18,.97),rgba(2,8,10,.98));box-shadow:0 24px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(120,240,230,.08)}
  .langlist a{justify-content:center;gap:.4rem;min-height:46px;padding:.35rem .6rem;border:1px solid var(--line);border-radius:8px;font-size:.92rem;line-height:1.25;text-align:center;text-wrap:balance;transition:border-color .2s,background-color .2s,color .2s}
  .langlist a[aria-current]{border-color:rgba(217,164,65,.7);background:rgba(217,164,65,.08)}
  .langlist a:active{background:rgba(61,232,224,.1)}
  /* while the menu is open it offers its own language list; the header switcher steps aside without moving anything */
  header.top:has(#burger[aria-expanded=true]) .lang{visibility:hidden}
}
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  .lang[open] .langlist{animation:lang-in .24s var(--ease-out)}
}
@keyframes lang-in{from{opacity:0;transform:translateY(-6px)}}
/* narrow phones: the arrow gives way, so logo, lettering, language and menu stay on one line */
@media (max-width:359px){
  .bar{gap:.5rem}
  .lang .chev{display:none}
  .lang>summary{padding:0 .6rem}
}
@media (min-width:821px){#menu{display:none}}
@media (min-width:600px){
  :root{--gutter:max(2rem,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
  .tile{min-height:156px;padding:1.3rem 1.25rem 1.2rem}
  .biz{padding:2rem 2.2rem 1.9rem}
  .biz::before{left:2.2rem}
  .biz-act{align-items:flex-start}
  .mail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem}
  .biz .btn{width:auto}
  .support{flex-direction:row;justify-content:center;gap:1.5rem;text-align:start}
  .support p{max-width:60ch}
  .support .btn{flex:none;white-space:nowrap}
}
@media (min-width:600px){
  /* genres on one line; the button moves below them when both do not fit side by side */
  .hero-foot{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1.1rem 2rem}
  .tag{flex-wrap:nowrap}
}
/* wide screens: About text to the right of the face, the music links side by side */
@media (min-width:900px) and (min-aspect-ratio:1/1),(orientation:landscape) and (max-height:520px){
  .about{align-items:center}
  .about::before{top:0;right:0;bottom:0;left:0;inset:0;height:auto;background:linear-gradient(270deg,rgba(1,4,5,.9) 0%,rgba(1,4,5,.72) 34%,rgba(1,4,5,0) 62%);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 12vh,#000 calc(100% - 12vh),transparent);mask-image:linear-gradient(180deg,transparent,#000 12vh,#000 calc(100% - 12vh),transparent)}
  .connect::before{background:linear-gradient(180deg,rgba(1,4,5,0),rgba(1,4,5,.5) 18%,rgba(1,4,5,.5) 82%,rgba(1,4,5,.85))}
  .about-text{margin-left:auto;margin-right:0;width:min(35rem,46%)}
  .about h2{font-size:min(4.6vw,5.4rem)}
}
/* computers and tablets in landscape: About follows the title card closely and is as tall as its text, so the camera
   pushes in on the mask while the text arrives (no long empty stretch); the phone layouts above stay as they are */
@media (min-width:900px) and (min-aspect-ratio:1/1) and (min-height:521px){
  .about{align-items:flex-start;padding:4vh 0 6vh}
  .about::before{-webkit-mask-image:linear-gradient(180deg,transparent,#000 5vh,#000 calc(100% - 6vh),transparent);mask-image:linear-gradient(180deg,transparent,#000 5vh,#000 calc(100% - 6vh),transparent)}
}
@media (min-width:900px){
  .deck{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem;align-items:stretch}
  .tiles{grid-template-columns:1fr;grid-auto-rows:1fr}
  .tile{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:1.3rem;padding:1.3rem 1.5rem}
  .tile svg.mark{width:44px;height:44px;margin:0}
  .tile .tx{flex:1}
  .tile .nm{font-size:1.5rem}
  .tile .hd{font-size:.88rem}
  .tile .go{position:static}
  .biz{padding:2.3rem 2.6rem}
  .biz::before{left:2.6rem}
  .row{min-height:72px;padding:.5rem 1.4rem}
  /* both groups end on the same line: the rows share the height of the Follow cards */
  .rows{flex:1;display:flex;flex-direction:column}
  .rows>li{flex:1}
  .row svg.mark{width:26px;height:26px}
  .row .nm{font-size:1.15rem}
}
@media (min-width:1180px){
  .biz{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.5rem 3rem}
  .biz-act{align-items:flex-end}
  .mail{justify-content:flex-end}
}
@media (min-width:1600px){
  :root{--header:72px;--page:min(1440px,100% - 8rem)}
  body{font-size:1.06rem}
}
@media (min-width:2200px){
  :root{--page:min(1720px,100% - 12rem)}
}
/* ---------- computer header: logo, lettering, navigation and language switcher grow with the space they have.
   Wide screens (computers, tablets in landscape, phones in desktop mode held sideways): from 72 px at 1024 to 100 px on
   very large screens. Upright screens with the computer layout (a phone in desktop mode is about 980 px wide and shows the
   page at about 40 %, large tablets held upright): sized by the screen width, so the header stays legible there. Phones in
   their normal view (also held sideways) keep their header as it is. ---------- */
@media (min-width:821px) and (min-aspect-ratio:20/21) and (min-height:521px),(min-width:960px) and (min-aspect-ratio:20/21){
  :root{--header:clamp(72px,2.3vw + 45px,100px);--logo:clamp(46px,1.6vw + 29px,66px)}
  .brand{gap:clamp(.75rem,.55vw + .35rem,1.15rem);font-size:clamp(1.05rem,.5vw + .75rem,1.45rem)}
  .dnav{gap:clamp(1.6rem,2.5vw,3.2rem)}
  .dnav a{font-size:clamp(1rem,.48vw + .74rem,1.34rem)}
  .lang{margin-inline-start:clamp(1.2rem,1.5vw,2rem);padding-inline-start:clamp(1.2rem,1.5vw,2rem)}
  .lang>summary{gap:.5em;font-size:clamp(.88rem,.32vw + .68rem,1.12rem)}
  .lang svg{width:1.35em;height:1.35em}
  .lang .chev{width:1em;height:1em}
  .langlist{min-width:clamp(13.5rem,14vw,17rem)}
  .langlist a{min-height:clamp(44px,1.2vw + 30px,52px);font-size:clamp(.95rem,.25vw + .76rem,1.1rem)}
}
@media (min-width:821px) and (max-aspect-ratio:20/21){
  :root{--header:min(10vw,112px);--logo:min(6.2vw,70px)}
  .brand{gap:min(1.4vw,1rem);font-size:min(2.4vw,1.65rem)}
  .dnav{gap:min(3.6vw,2.6rem)}
  .dnav a{font-size:min(2.2vw,1.5rem);padding:1.1vw 0}
  .dnav a::after{bottom:.25vw;height:max(2px,.25vw)}
  .lang{margin-inline-start:min(2.4vw,1.8rem);padding-inline-start:min(2.4vw,1.8rem)}
  .lang>summary{gap:.5em;min-height:max(44px,6vw);font-size:min(1.95vw,1.35rem)}
  .lang svg{width:1.35em;height:1.35em}
  .lang .chev{width:1em;height:1em}
  .langlist{top:calc(100% + .8vw);min-width:min(27vw,19rem);padding:.6vw}
  .langlist a{min-height:max(44px,5.2vw);padding:0 1.6vw;font-size:min(2vw,1.35rem)}
  .lang .ok{width:1.1em;height:1.1em}
}
/* ---------- computer layout: the smaller texts and controls grow with the screen (hero genres and button, Connect, Business
   Inquiries, support, footer), so they keep their proportion to the large headings; upright screens with the computer
   layout (phones in desktop mode) a little more. Phones keep their sizes. ---------- */
@media (min-width:900px) and (min-height:521px),(min-width:960px){
  .tag{font-size:clamp(1.05rem,.55vw + .58rem,1.4rem)}
  .hero .btn{min-width:min(18.5rem,100%);min-height:clamp(52px,1.1vw + 38px,62px);padding-inline:clamp(1.75rem,1.6vw,2.6rem);font-size:clamp(.98rem,.3vw + .78rem,1.18rem)}
  .glabel{font-size:clamp(.95rem,.25vw + .75rem,1.1rem)}
  .tile .nm{font-size:clamp(1.5rem,.45vw + 1.1rem,1.8rem)}
  .tile .hd{font-size:clamp(.88rem,.22vw + .7rem,1.02rem)}
  .tile svg.mark{width:clamp(44px,1.2vw + 30px,52px);height:clamp(44px,1.2vw + 30px,52px)}
  .row{min-height:clamp(72px,1.1vw + 58px,84px)}
  .row svg.mark{width:clamp(26px,.6vw + 18px,32px);height:clamp(26px,.6vw + 18px,32px)}
  .row .nm{font-size:clamp(1.15rem,.35vw + .87rem,1.4rem)}
  .biz p{font-size:clamp(.98rem,.25vw + .8rem,1.15rem);max-width:52ch}
  .cp{min-height:44px;padding-inline:1.1rem;font-size:clamp(.8rem,.2vw + .66rem,.95rem)}
  .biz .btn{min-height:clamp(52px,.8vw + 42px,58px);font-size:clamp(.98rem,.25vw + .8rem,1.12rem)}
  .support p{font-size:clamp(.92rem,.25vw + .74rem,1.08rem)}
  .support .btn{min-height:clamp(48px,.8vw + 38px,54px);font-size:clamp(.98rem,.2vw + .82rem,1.08rem)}
  footer{font-size:clamp(.85rem,.2vw + .7rem,.98rem)}
}
@media (min-width:900px) and (max-aspect-ratio:20/21){
  .tag{font-size:min(1.9vw,1.35rem)}
  .hero .btn{min-width:min(30vw,100%);min-height:max(52px,6vw);padding-inline:3vw;font-size:min(1.85vw,1.3rem)}
  .glabel{font-size:min(1.75vw,1.2rem)}
  .tile .nm{font-size:min(2.5vw,1.8rem)}
  .tile .hd{font-size:min(1.6vw,1.1rem)}
  .row .nm{font-size:min(2.1vw,1.5rem)}
  .biz p{font-size:min(1.85vw,1.25rem)}
  .mail a.addr{font-size:min(2.3vw,1.5rem)}
  .cp{min-height:max(44px,5vw);font-size:min(1.45vw,1rem)}
  .biz .btn{min-height:max(52px,6vw);font-size:min(1.85vw,1.25rem)}
  .support p{font-size:min(1.75vw,1.2rem)}
  .support .btn{min-height:max(48px,5.6vw);font-size:min(1.8vw,1.2rem)}
  footer{font-size:min(1.6vw,1.05rem)}
}
/* phones in landscape: the title card moves beside the face, over the tunnel */
@media (orientation:landscape) and (max-height:520px){
  .hero{justify-content:center}
  .herotxt{width:min(48%,30rem);margin-left:auto;padding:calc(var(--header) + .5rem) var(--gutter) 1rem;text-align:center}
  .herotxt::before,.herotxt::after{display:none}
  .hero::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(1,4,5,.84) 0%,rgba(1,4,5,.66) 40%,rgba(1,4,5,0) 64%);pointer-events:none}
  .hero h1{font-size:min(7.2vw,24vh)}
  .hero-foot{flex-direction:column;flex-wrap:nowrap;gap:.8rem}
  .tag{flex-wrap:wrap;font-size:.78rem}
  .tag i{margin:0 .55em}
  .about{padding:1.5rem 0 2rem}
  /* the side shade of the hero continues straight into About, so About only fades out at its lower end */
  .about::before{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 12vh),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 12vh),transparent)}
}

/* ---------- languages and scripts: system fonts only; Latin text and the brand lettering keep the original fonts.
   Arabic: the Apple, Android and Windows Arabic system fonts come before Arial, whose Arabic glyphs are plainer ---------- */
html:lang(ja){--font:"Avenir Next","Segoe UI Variable","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP","Noto Sans CJK JP",system-ui,sans-serif}
html:lang(ar){--font:"Avenir Next","Segoe UI Variable","Segoe UI",Inter,Roboto,"Helvetica Neue","SF Arabic","Geeza Pro","Noto Sans Arabic","Noto Naskh Arabic",Arial,Tahoma,system-ui,sans-serif}
:lang(ja) :is(h2,.mlinks a,.dnav a){letter-spacing:.04em}
:lang(ja) h2{line-height:1.1}
:lang(ja) .tag{letter-spacing:.01em}
:lang(ja) .about-text p{line-height:1.95;line-break:strict}
/* Arabic letters are joined: letter spacing would pull them apart */
:lang(ar) :is(.dnav a,.mlinks a,h2,.mhead,.glabel,.biz h3,.btn,.cp,.chips li,.tag,.sb.mailto .sbl,.mlang summary,.ms-title,.notfound h1){letter-spacing:0}
:lang(ar) h2{line-height:1.15}
:lang(ar) .about-text p{line-height:1.95}
[dir=rtl] .glabel{text-align:right}
[dir=rtl] .biz::before{left:auto;right:1.25rem}
@media (min-width:600px){[dir=rtl] .biz::before{right:2.2rem}}
@media (min-width:900px){[dir=rtl] .biz::before{right:2.6rem}}

/* ---------- About on computers (also tablets in landscape and phones in desktop mode): the description is set as the
   lead text of the page - larger, a calmer line height, a measure of about 55 characters, brighter than body text.
   The column width follows the text size (em), so lines stay the same length from 1280 to 3440 px. Phones keep their
   About text as it is. ---------- */
@media (min-width:900px) and (min-height:521px),(min-width:960px){
  .about-text{font-size:clamp(1.375rem,.3vw + 1.12rem,1.5625rem);max-width:none;width:min(27em,100%)}
  .about-text p{font-family:"Avenir Next","Segoe UI Variable Display","Segoe UI Variable","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;font-size:1em;font-weight:400;line-height:1.6;letter-spacing:.004em;color:#dce8e7;font-kerning:normal;text-wrap:pretty;text-shadow:0 1px 18px rgba(1,4,5,.55)}
  :lang(ja) .about-text p,:lang(ar) .about-text p{font-family:var(--font);letter-spacing:0}
  :lang(ja) .about-text p{line-height:1.85;letter-spacing:.02em}
  :lang(ar) .about-text p{line-height:1.85}
}
@media (min-width:900px) and (min-height:521px) and (min-aspect-ratio:1/1),(min-width:960px) and (min-aspect-ratio:1/1){
  .about-text{width:min(27em,47%)}
}

/* ---------- opening: the tunnel lights come on, then the title. Once per page load, nothing waits for it ---------- */
@media (prefers-reduced-motion:no-preference){
  .stage::before{animation:lights-on 2.3s linear .05s both}
  .bar{animation:fade-in .7s ease backwards}   /* starts at once: the page shows content in its first picture */
  .hero h1{animation:title-in 1.3s var(--ease-out) .75s backwards,gold-sweep 1.9s var(--ease-sweep) 1.55s}
  .tag{animation:rise .9s var(--ease-out) 1.05s backwards}
  .hero .btn{animation:rise .9s var(--ease-out) 1.2s backwards}
  @media (hover:hover) and (pointer:fine){.btn.main:hover::after{animation:sheen .95s var(--ease-sweep)}}
  .btn.main:focus-visible::after,.btn.main.shine::after{animation:sheen .85s var(--ease-sweep)}
  .ic.lit::after,.ic:focus-visible::after{animation:tube-on .42s linear}
  /* depth: the title card drifts a little slower than the page while it leaves (compositor only, no script) */
  @supports (animation-timeline:view()){
    .herotxt{animation:card-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
  /* arriving in a chapter: its tube light switches on (site.js marks headings that start off screen) */
  .tube-wait::after{opacity:.12}
  .tube-wait.tube-on::after{opacity:1;animation:tube-on .55s linear .15s backwards}
  .biz.tube-wait::before{opacity:.15}
  .biz.tube-wait.tube-on::before{opacity:1;animation:tube-on .55s linear .2s backwards}
  @media (hover:hover) and (pointer:fine){.ic:hover::after{animation:tube-on .42s linear}}
}
/* the animated picture (above the curtain) plays its own opening from the same point; the curtain keeps the still artwork
   underneath dark until then, so nothing flashes while the picture fades in */
@keyframes lights-on{0%{opacity:.94}26%{opacity:.9}30%{opacity:.62}33%{opacity:.9}40%{opacity:.5}46%{opacity:.72}100%{opacity:0}}
@keyframes fade-in{from{opacity:0}}
@keyframes title-in{from{opacity:0;transform:translateY(.12em) scale(1.04);filter:drop-shadow(0 8px 30px rgba(0,0,0,.75)) blur(6px)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes gold-sweep{from{background-position:100% 0,0 0}to{background-position:0% 0,0 0}}
@keyframes sheen{from{transform:translateX(-170%) skewX(-20deg)}to{transform:translateX(420%) skewX(-20deg)}}
@keyframes tube-on{0%{opacity:0}10%{opacity:.95}18%{opacity:.2}30%{opacity:1}42%{opacity:.45}56%,100%{opacity:1}}
@keyframes menu-in{from{opacity:0;transform:translateY(14px)}}
@keyframes card-out{to{transform:translate3d(0,9vh,0);opacity:.35}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
  .stage>img{transform:none!important}
}

/* email fallback panel: appears only if a tapped email link showed no sign of opening an email app */
.mailsheet{position:fixed;z-index:60;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(440px,100% - 2rem);padding:1.5rem;border:1px solid var(--line-strong);border-radius:8px;background:linear-gradient(135deg,#0f2b2e,#071214 60%);box-shadow:0 0 0 100vmax rgba(1,4,5,.5),0 18px 50px rgba(0,0,0,.6);text-align:center}
.mailsheet[hidden]{display:none}
.ms-title{margin:0 0 .3rem;font-weight:800;font-size:1.08rem;letter-spacing:.02em}
.ms-text{margin:0 auto .75rem;max-width:38ch;color:var(--mute);font-size:.92rem;line-height:1.5;text-wrap:balance}
.ms-addr{margin:0 0 1rem;font-weight:700;color:var(--gold-hi);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.ms-addr a{color:inherit;text-decoration:none}
.ms-actions{display:flex;gap:.75rem;justify-content:center;align-items:center}
.ms-actions .btn{flex:1;max-width:14rem}
.ms-close{min-height:52px;padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--mute);font:600 .85rem var(--font);cursor:pointer}
@media (prefers-reduced-motion:no-preference){.mailsheet:not([hidden]){animation:sheetin .25s var(--ease) both}}
@keyframes sheetin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* section headings receive focus after a menu jump (screen readers start there); they are not controls, so no ring */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}