/* MYNT shell: the transparent menu, the slim footer and the film grain shared by every page.
   Class names are distinct from the older site.css so Card Studio and the portal can load both. */
:root{
  --ground:#0a0a0a;
  --white:#efefef;
  --text:#b3b3b3;
  --dim:#7a7a7a;
  --accent:#ff6a1f;
  --accent-hi:#ff8547;
  --hair:rgba(255,255,255,.14);
  --display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --body:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,80px);
  --menu-h:84px;
}

.film{position:fixed;inset:0;z-index:30;pointer-events:none}
.film.grain{opacity:.05;background-size:220px 220px;mix-blend-mode:overlay}
.film.vignette{background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.6) 100%)}
@keyframes mgrain{0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:30px -70px}60%{background-position:-90px -20px}80%{background-position:70px 60px}100%{background-position:0 0}}

/* menu: transparent, over everything */
.menu{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:40;transition:background .4s ease}
.menu.scrolled,.menu.solid{background:linear-gradient(180deg,rgba(10,10,10,.92),rgba(10,10,10,0))}
.menu .in{height:var(--menu-h);padding-inline:var(--pad);display:flex;align-items:center;gap:clamp(18px,3vw,48px)}
.menu .mark{display:block;flex:none;width:48px;height:40px}
.menu .mark i{display:block;width:100%;height:100%;background:linear-gradient(180deg,#fff 0%,#d6d8dc 42%,#8e9399 58%,#eef0f2 100%);
  -webkit-mask:url("../media/home/m.png") center/contain no-repeat;mask:url("../media/home/m.png") center/contain no-repeat}
.menu nav.main{display:flex;gap:clamp(18px,2.6vw,46px);margin-inline:auto}
.menu nav.main a{font:300 13px/1 var(--body);letter-spacing:.34em;text-transform:uppercase;color:#d7d7d7;padding:10px 0;position:relative;text-decoration:none}
.menu nav.main a:hover{color:#fff}
.menu nav.main a[aria-current="page"]{color:#fff}
.menu nav.main a[aria-current="page"]::after{content:"";position:absolute;left:0;right:.34em;bottom:0;height:1px;background:var(--accent)}
.menu .signin{flex:none;font:300 12px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--white);border:1px solid var(--accent);padding:15px 22px;border-radius:2px;text-decoration:none;transition:background .25s ease,color .25s ease}
.menu .signin:hover,.menu .signin[aria-current="page"]{background:var(--accent);color:#0a0a0a}
.menu .mtoggle{display:none;margin-left:auto;background:none;border:0;color:#e2e2e2;font:300 12px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;padding:12px 0;cursor:pointer}
.menu .drawer{display:none}
@media (max-width:1100px){
  .menu nav.main,.menu .signin{display:none}
  .menu .mtoggle{display:block}
  .menu.open{background:rgba(10,10,10,.97)}
  .menu.open .drawer{display:grid;padding:0 var(--pad) 22px;gap:2px}
  .menu .drawer a{padding:14px 0;border-top:1px solid var(--hair);font:300 14px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:#e2e2e2;text-decoration:none}
}

/* footer: one quiet strip */
.foot{position:relative;z-index:5;background:var(--ground);border-top:1px solid var(--hair);padding:12px var(--pad);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 28px;font:300 12.5px/1.5 var(--body);color:var(--dim)}
.foot p{margin:0}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot nav a{color:var(--text);text-decoration:none}
.foot nav a:hover{color:var(--white)}
.foot .legal{flex:1 1 520px}

@media (prefers-reduced-motion:reduce){.film.grain{animation:none}}

/* Card Studio: a working page, so the menu is locked as a solid bar in the page colour and never sits over content */
body:has(.studio-sec) .menu{background:var(--ground);border-bottom:1px solid var(--hair)}
/* Card Studio: the option panel matches the preview's height and scrolls inside itself, so neither ever slides under the menu */
@media (min-width:981px){
  body:has(.studio-sec) .studio-panel{align-self:stretch;height:0;min-height:100%;overflow-y:auto;overscroll-behavior:contain;padding-right:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
}
/* on small screens text scrolls right up to the menu, so the menu becomes a solid bar once the page moves */
@media (max-width:900px){ .menu.scrolled{background:rgba(10,10,10,.96)} }
@media (min-width:981px){ body:has(.studio-sec) .studio-sec{padding-bottom:28px!important} }