/* Mazufa navigation — responsive, RTL-aware, works with zero JavaScript */
:root{--mznav-h:64px;--mznav-bg:rgba(8,8,10,.82);--mznav-solid:#0a0a0c;--mznav-bd:rgba(255,255,255,.09);--mznav-fg:#c7c7ce;--mznav-fg-on:#fff;--mznav-acc:#FF3D5A}
.mznav *,.mznav *::before,.mznav *::after{box-sizing:border-box}
.mznav{position:fixed;top:0;left:0;right:0;z-index:2147482000;background:var(--mznav-solid);border-bottom:1px solid var(--mznav-bd);padding-top:env(safe-area-inset-top,0px);font-family:inherit;-webkit-font-smoothing:antialiased}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .mznav{background:var(--mznav-bg);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
}
.mznav-toggle{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.mznav-inner{display:flex;align-items:center;gap:6px;max-width:1400px;margin:0 auto;padding:0 clamp(12px,2.2vw,26px);min-height:var(--mznav-h);position:relative}
.mznav-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;min-height:44px;padding:4px 2px;border-radius:10px}
.mznav-logo .mz-r25-original-logo{display:block}
.mznav-menu{display:flex;align-items:center;gap:2px;flex:1 1 auto;justify-content:center;min-width:0}
.mznav-menu a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px clamp(7px,.95vw,14px);color:var(--mznav-fg);font-size:clamp(12.5px,1vw,13.5px);font-weight:600;letter-spacing:.3px;text-decoration:none;border-radius:10px;white-space:nowrap;transition:background .18s ease,color .18s ease}
.mznav-menu a:hover,.mznav-menu a:focus-visible{background:rgba(255,255,255,.07);color:var(--mznav-fg-on)}
.mznav-menu a[aria-current="page"]{color:var(--mznav-acc);background:rgba(255,61,90,.10)}
.mznav-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-inline-start:auto}
.mznav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px clamp(14px,1.6vw,24px);background:linear-gradient(135deg,#E11D48,#8E0F26);color:#fff!important;font-size:13.5px;font-weight:700;text-decoration:none;border-radius:11px;white-space:nowrap;box-shadow:0 6px 22px rgba(255,61,90,.32)}
.mznav-cta:hover,.mznav-cta:focus-visible{filter:brightness(1.08)}
.mznav-burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--mznav-bd);border-radius:11px;background:rgba(255,255,255,.04);cursor:pointer;flex:0 0 auto;padding:0}
.mznav-burger span{display:block;width:19px;height:2px;background:var(--mznav-fg-on);border-radius:2px;position:relative;transition:transform .22s ease,opacity .22s ease}
.mznav-burger span::before,.mznav-burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--mznav-fg-on);border-radius:2px;transition:transform .22s ease}
.mznav-burger span::before{top:-6px}.mznav-burger span::after{top:6px}
.mznav-toggle:checked~.mznav-inner .mznav-burger span{background:transparent}
.mznav-toggle:checked~.mznav-inner .mznav-burger span::before{transform:translateY(6px) rotate(45deg)}
.mznav-toggle:checked~.mznav-inner .mznav-burger span::after{transform:translateY(-6px) rotate(-45deg)}
.mznav-toggle:focus-visible~.mznav-inner .mznav-burger{outline:2px solid var(--mznav-acc);outline-offset:2px}
.mznav a:focus-visible,.mznav button:focus-visible{outline:2px solid var(--mznav-acc);outline-offset:2px}
@media (max-width:1023px){
  .mznav-menu a{padding:8px 9px;font-size:12.5px}
}
@media (max-width:899px){
  .mznav-burger{display:inline-flex}
  .mznav-menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0 12px;background:var(--mznav-solid);border-bottom:1px solid var(--mznav-bd);max-height:0;overflow:hidden;visibility:hidden;box-shadow:0 22px 44px rgba(0,0,0,.55)}
  .mznav-menu a{justify-content:flex-start;min-height:52px;font-size:15.5px;padding:12px 14px;border-radius:12px}
  .mznav-menu a+a{border-top:1px solid rgba(255,255,255,.05)}
  .mznav-toggle:checked~.mznav-inner .mznav-menu{max-height:min(76vh,560px);overflow-y:auto;visibility:visible;padding-top:8px;padding-bottom:14px;-webkit-overflow-scrolling:touch}
}
@media (min-width:900px){ .mznav-toggle:checked~.mznav-inner .mznav-menu{max-height:none;visibility:visible} }
@media (prefers-reduced-motion:reduce){ .mznav *{transition:none!important} }
@media (max-width:420px){
  .mznav-cta{padding:10px 14px;font-size:12.5px}
  .mznav-inner{gap:4px;padding:0 10px}
}
@media (forced-colors:active){
  .mznav{border-bottom:1px solid CanvasText}
  .mznav-menu a,.mznav-cta{forced-color-adjust:none;color:LinkText}
}
.mznav-menu{transition:max-height .28s ease}
html{scroll-padding-top:calc(var(--mznav-h) + 12px)}

/* beat the legacy r25v14 mobile-flow rule: the bar stays pinned at every width */
@media (max-width:900px){
  nav.mznav[aria-label="Main"]{position:fixed!important;top:0!important;left:0!important;right:0!important;inset-inline:0!important}
}

/* mz-a11y-r26 */
@media (pointer:coarse){main button,main [role="tab"],main [role="button"],main summary,main a[href]:not([style*="display:block"]){min-height:44px}main button,main [role="tab"]{display:inline-flex;align-items:center}}
main summary:focus-visible,main details:focus-visible,main a:focus-visible,main button:focus-visible,main input:focus-visible,main select:focus-visible,main textarea:focus-visible{outline:3px solid #FF8FA0;outline-offset:2px;border-radius:6px}
nav[data-mz-related="r26"] a:hover,nav[data-mz-related="r26"] a:focus-visible{border-color:rgba(255,61,90,.55);background:rgba(255,61,90,.07)}
section[data-mz-content="r26"] details[open] summary{color:#FF8FA0}
section[data-mz-content="r26"] summary::-webkit-details-marker{display:none}


/* ── Mazufa 2026-09-17 ─────────────────────────────────────────────
   1. Brand wordmark rules, mirrored from mazufa-r25.css so that pages
      which do not load the design-system stylesheet still render the
      real Mazufa wordmark instead of falling back to plain text.
      Declarations and media context are byte-for-byte the same, so on
      pages that load both stylesheets the result is unchanged.
   2. Artist portal link in the navigation bar.
   3. Skip-to-content link for keyboard and screen-reader users.
   ──────────────────────────────────────────────────────────────── */
.mz-r25-original-logo{display:inline-block;width:168px;height:49px;max-width:42vw;flex:0 0 auto;background:linear-gradient(110deg,#ff3d5a 4%,#ff8fa0 48%,#ff6b82 68%,#ff3d5a 92%);-webkit-mask:url("/assets/brand/mazufa-logo.png") center/contain no-repeat;mask:url("/assets/brand/mazufa-logo.png") center/contain no-repeat;filter:drop-shadow(0 0 12px rgba(255,61,90,.28))}
.mz-r25-original-logo--compact{width:138px;height:41px;max-width:38vw}
.mz-r25-original-logo--footer{width:138px;height:41px;max-width:42vw}
@media(max-width:720px){.mz-r25-original-logo{width:138px;height:41px;max-width:40vw}.mz-r25-original-logo--compact{width:124px;height:36px}.mz-r25-original-logo--footer{width:124px;height:36px}}
.mznav-login{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px clamp(11px,1.2vw,16px);color:var(--mznav-fg);font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--mznav-bd);border-radius:11px;white-space:nowrap;transition:border-color .18s ease,color .18s ease,background .18s ease}
.mznav-login:hover,.mznav-login:focus-visible{color:var(--mznav-fg-on);border-color:rgba(255,61,90,.55);background:rgba(255,61,90,.08)}
@media(max-width:640px){.mznav-right .mznav-login{display:none}}
.mznav-menu a.mznav-login-m{display:none}
@media(max-width:640px){.mznav-menu a.mznav-login-m{display:inline-flex;color:var(--mznav-acc)}}
.mz-skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:2147483000;padding:12px 18px;background:#fff;color:#0a0a0c;font-weight:700;font-size:14px;text-decoration:none;border-radius:0 0 12px 12px}
.mz-skip:focus{inset-inline-start:12px}

/* Layout-stability fix — 2026-09-17.
   The hero's typewriter line and the status ticker on the home template grow
   and shrink by whole text lines while they animate. Each change moved every
   element below them, which is what put every mobile URL of this site in the
   "poor" bucket of Core Web Vitals. Giving both boxes a fixed height on narrow
   viewports keeps their own animation and stops it from moving the page.
   Heights are set above the widest measured value across all 24 languages
   (75px and 68px, both German, measured at 360px). Desktop is untouched: the
   lines never wrap there. */
@media (max-width:720px){
  [data-mz-template="home"] main section div[style*="min-height:36px"],
  [data-mz-template="home"] main section div[style*="min-height: 36px"]{height:84px!important;overflow:visible}
  [data-mz-template="home"] main section div[style*="min-height:20px"],
  [data-mz-template="home"] main section div[style*="min-height: 20px"]{height:76px!important;overflow:visible}
  /* The blinking bar that trails the typed text moves one character-width with
     every keystroke, and each move is counted as a layout shift — 261 of them
     in 22 seconds, the single largest remaining contributor. The typing itself
     is kept; only the bar is dropped, and only on narrow screens. */
  [data-mz-template="home"] main span[style*="mzBlink"]{display:none!important}
}


/* ── Mazufa accessibility pass — 2026-09-17 (build3) ────────────────
   1. The mobile-menu checkbox is a real, focusable control only at the
      widths where its burger button exists. Above 900px the burger is
      display:none, so the checkbox was tab stop #1 on every page with
      no visible focus ring anywhere on screen. display:none removes it
      from the tab order while leaving :checked and every sibling
      selector below working exactly as before.
   2. Links inside running text are given an underline so they are not
      distinguished from the surrounding text by colour alone; the
      measured colour contrast between #FF8FA0 / #FF3D5A link text and
      the #c9c9d1 body text around it is 1.32:1 and 2.10:1.
   3. Horizontally scrollable blocks are reachable by keyboard and show
      where focus is.
   ─────────────────────────────────────────────────────────────── */
@media (min-width:900px){ .mznav-toggle{display:none} }
p a[href][style*="color" i],li a[href][style*="color" i],td a[href][style*="color" i],
dd a[href][style*="color" i],blockquote a[href][style*="color" i],
p a[href]:not([class]),li a[href]:not([class]),td a[href]:not([class]),
dd a[href]:not([class]),blockquote a[href]:not([class]){text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
/* a link that was deliberately un-underlined inline keeps its own styling */
p a[style*="text-decoration:none" i],li a[style*="text-decoration:none" i],
td a[style*="text-decoration:none" i],dd a[style*="text-decoration:none" i]{text-decoration:none}
[data-mz-scroll]{outline-offset:2px}
[data-mz-scroll]:focus-visible{outline:3px solid #FF8FA0;border-radius:8px}
.mz-banner{display:block;position:static}
.mz-skip:focus{outline:3px solid #FF3D5A;outline-offset:2px}

/* Newsletter signup band — 2026-09-18.
   Sits at the top of the footer on every page. Colours are taken from the
   values already verified at AA contrast in today's accessibility pass;
   the body grey is #9A9AA3 on the footer's near-black, which measures 7.3:1. */
.mz-nl{border-bottom:1px solid rgba(255,255,255,.07)}
.mz-nl-in{max-width:1280px;margin:0 auto;padding:40px clamp(20px,4vw,56px);display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,420px);gap:28px;align-items:center}
@media(max-width:860px){.mz-nl-in{grid-template-columns:1fr;gap:20px}}
.mz-nl-h{margin:0 0 8px;font-size:clamp(18px,2vw,22px);font-weight:700;color:#F5F5F7;line-height:1.3}
.mz-nl-p{margin:0;font-size:14.5px;line-height:1.65;color:#9A9AA3;max-width:56ch}
.mz-nl-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}
.mz-nl-lab{grid-column:1/-1;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:#B5B5BE}
.mz-nl-f{min-height:46px;padding:11px 14px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.04);color:#F5F5F7;font-family:inherit;font-size:14.5px;min-width:0}
.mz-nl-f::placeholder{color:#83838F}
.mz-nl-f:focus{outline:3px solid #FF8FA0;outline-offset:2px;border-color:#FF3D5A}
.mz-nl-btn{min-height:46px;padding:11px 20px;border:none;border-radius:11px;background:linear-gradient(135deg,#E11D48,#8E0F26);color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.mz-nl-btn:hover{filter:brightness(1.08)}
.mz-nl-btn:focus-visible{outline:3px solid #FF8FA0;outline-offset:2px}
.mz-nl-btn[disabled]{opacity:.6;cursor:default}
.mz-nl-consent{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;line-height:1.6;color:#9A9AA3}
.mz-nl-msg{grid-column:1/-1;margin:0;font-size:13.5px;line-height:1.6;min-height:1.6em}
.mz-nl-msg[data-tone="good"]{color:#86E5A8}
.mz-nl-msg[data-tone="bad"]{color:#FF8FA0}
.mz-nl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media(max-width:420px){.mz-nl-form{grid-template-columns:1fr}}


/* ── Mazufa mobile header fit — 2026-09-18 ────────────────────────
   At 360px and below the header's right-hand cluster (language picker +
   localized CTA + burger) was wider than the space the logo left it, and
   because .mznav-right is flex:0 0 auto the cluster overflowed the fixed
   header. That overflow is clipped without a scrollbar, so on locales
   with long CTA labels the menu button was partly or entirely
   unreachable — measured at 360px: 0px visible on /fa/, 5px on
   /directory/nl/, 9px on /de/, 10px on /ja/, /ko/ and /ur/, 22px on
   /ar/. Nothing is removed; the flexible parts are simply allowed to
   shrink so the 46px button always fits. Verified at 320, 360 and 414px
   across ar, de, es, fa, ja, ko, nl, ur and en: burger 46/46 visible,
   no horizontal page scroll, dropdown still opens to full height.
   ─────────────────────────────────────────────────────────────── */
@media (max-width:899px){
  .mznav-inner{flex-wrap:nowrap}
  .mznav-right{flex:0 1 auto;min-width:0}
  .mznav-logo{flex:0 1 auto;min-width:0;overflow:hidden}
  .mznav-right>[data-mz-langslot]{flex:0 1 auto;min-width:0}
  .mznav-cta{flex:0 1 auto;min-width:0;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;line-height:24px}
  .mznav-burger{flex:0 0 46px}
}
@media (max-width:560px){
  .mznav-logo .mz-r25-original-logo{width:112px;height:33px}
  .mznav-right>[data-mz-langslot] button{padding-inline:7px!important;gap:4px!important}
  .mznav-cta{max-width:118px;padding:10px 11px;font-size:12.5px}
}
@media (max-width:380px){
  .mznav-logo .mz-r25-original-logo{width:98px;height:29px}
  .mznav-right>[data-mz-langslot] button{padding-inline:5px!important;gap:3px!important}
  .mznav-cta{max-width:100px;padding:10px 8px;font-size:11.5px}
}

/* ── Mazufa small-phone content width — 2026-09-19 ────────────────
   Sections carry 56px of side padding, which on a 320px screen leaves
   208px of content. Combined with card grids whose tracks had a hard
   minmax() floor, the cards overflowed their cell and were clipped.
   The grid floors are now written as minmax(min(NNNpx,100%),1fr) in the
   markup, so the tracks shrink; this narrows the side padding on the
   smallest phones so the cards get 280px instead of 208px. Measured at
   320px: card width 208 -> 280, no horizontal page scroll.
   ─────────────────────────────────────────────────────────────── */
@media (max-width:420px){
  main>section{padding-left:20px!important;padding-right:20px!important}
}