/* MC v0.13u (Basis v0.13r-Datei; Ergänzung am Ende: NEXT STORY in der Übersicht) */
/* MC v0.13r (Basis v0.13q; Ergänzungen am Ende der Datei, Abschnitt v0.13r) */
/* MC v0.13m — Intro-Präsentation vor der statischen Vogue-Strecke (nur archive-31). Alles ist auf .mc-intro / .mi-* begrenzt. */

/* Seitenrolle sperren, solange der Layer läuft. scrollbar-gutter hält die Breite stabil (kein Springen der Strecke beim Entsperren). */
html.mc-intro-on{overflow:hidden;scrollbar-gutter:stable}

/* Layer: liegt unter dem Seitenkopf (z-index 60), damit Menü und Navigation erreichbar bleiben. Hintergrund = Seitenfarbe (kein weißer Zwischenbildschirm). */
.mc-intro{position:fixed;inset:0;z-index:55;background:var(--bg);--mi-ctl:76px;--mi-ease:cubic-bezier(.7,0,.2,1)}
.mc-intro.is-leaving{opacity:0;pointer-events:none;transition:opacity .8s ease!important}
.mc-intro .mi-stage{position:absolute;left:var(--gut);right:var(--gut);top:calc(var(--head-h) + 8px);bottom:var(--mi-ctl)}
.mc-intro .mi-scene{position:absolute;inset:0;visibility:hidden}
.mc-intro .mi-scene.is-active{visibility:visible}

/* Enthüllung: gleiche Maskenlogik wie v0.13k/l (clip-path), Foto selbst starr. --from = verdeckt, --to = Ausgang beim Schließen */
.mc-intro .mi-item{position:absolute;overflow:hidden;margin:0;padding:0;
  clip-path:var(--from,inset(100% 0 0 0));
  transition:clip-path var(--rv-d,.9s) var(--mi-ease) var(--rv-delay,0s)!important}
.mc-intro .mi-item img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform:none;pointer-events:none;user-select:none}
.mc-intro .mi-item.is-in{clip-path:inset(0 0 0 0)}
.mc-intro .mi-item.is-out{clip-path:var(--to,var(--from,inset(100% 0 0 0)));
  transition:clip-path var(--out-d,.6s) cubic-bezier(.5,0,.8,.2) 0s!important}

/* Auftakt: von unten nach oben (1,0 s), Schließen: nach oben weg */
.mc-intro .mi-hero .mi-item{--from:inset(100% 0 0 0);--to:inset(0 0 100% 0);--rv-d:1s}
/* Enges Paar: aus der Mittelfuge nach außen (0,8 s, zweites +0,12 s), Schließen: zurück zur Fuge */
.mc-intro .mi-pair .mi-item{--from:inset(0 0 0 100%);--rv-d:.8s}
.mc-intro .mi-pair .mi-item.is-right{--from:inset(0 100% 0 0)}
/* Asymmetrische Gruppe: von der gemeinsamen Standlinie nach oben (0,9 s, zweites +0,25 s), Schließen: nach oben weg */
.mc-intro .mi-stagger .mi-item{--from:inset(100% 0 0 0);--to:inset(0 0 100% 0);--rv-d:.9s}
.mc-intro .mi-solo .mi-item{--from:inset(100% 0 0 0);--to:inset(0 0 100% 0);--rv-d:.9s}
/* Finale: ruhig aus der Mitte nach links und rechts (1,2 s), Schließen: zur Mitte */
.mc-intro .mi-finale .mi-item{--from:inset(0 50% 0 50%);--rv-d:1.2s}

/* Titel im Auftakt (Schrift kommt aus der Strecken-Überschrift) */
.mc-intro .mi-title{position:absolute;display:flex;align-items:center;font-size:clamp(22px,2.6vw,38px);line-height:1.15;opacity:0;
  transition:opacity .5s ease .25s!important}
.mc-intro .mi-title.is-in{opacity:1}

/* Bedienung (v0.13n): dezent, Textknöpfe ohne Rahmen, Zielfläche 44 px, unten rechts unter dem Bildbereich (überlagert kein Foto) */
.mc-intro{--mi-ctl:60px}
.mc-intro .mi-cap{position:absolute;left:var(--gut);bottom:calc(var(--mi-ctl)/2 - 5px);font:500 11px/1 var(--sans);letter-spacing:.14em;color:var(--mute)}
.mc-intro .mi-ctl{position:absolute;right:calc(var(--gut) - 14px);bottom:0;height:var(--mi-ctl);display:flex;align-items:center;gap:0}
.mc-intro .mi-btn{appearance:none;cursor:pointer;min-height:44px;padding:0 14px;border:0;background:transparent;color:var(--fg);opacity:.78;
  font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:opacity .2s ease!important}
.mc-intro .mi-btn+.mi-btn{position:relative}
.mc-intro .mi-btn+.mi-btn::before{content:"";position:absolute;left:0;top:14px;bottom:14px;border-left:1px solid var(--line)}
.mc-intro .mi-btn:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.mc-intro .mi-btn:focus-visible{opacity:1;outline:2px solid var(--fg);outline-offset:-4px}

/* ===== Fotoübersicht (VIEW ALL PHOTOGRAPHS) ===== */
.mc-index{max-width:1780px;margin:0 auto;padding:calc(var(--head-h) + 10px) var(--gut) 0;box-sizing:border-box;outline:none}
.mc-index[hidden]{display:none}
.mc-index .mx-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 24px;padding-bottom:28px}
.mc-index .mx-title{min-width:0}
.mc-index .mx-back{display:inline-block;margin:0 0 12px}
.mc-index .mx-h1{margin:0;font-size:20.4px;line-height:1.2;font-weight:500}
.mc-index .mx-label{margin:8px 0 0;font:500 11px/1.3 var(--sans);letter-spacing:.14em;color:var(--mute)}
.mx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.mx-btn{appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;
  border:1px solid rgba(19,19,18,.62);background:transparent;color:var(--fg);font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .2s ease,color .2s ease}
.mx-btn:hover,.mx-btn:focus-visible{background:var(--fg);color:var(--bg)}
.mx-btn:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
/* v0.13o: VIEW FULL STORY als ruhiger Textlink (Typografie wie Navigation: 11 px, Versalien, gesperrt), Pfeil klein, Zielfläche 44 px hoch */
.mx-full{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;border:0;background:transparent;color:var(--fg);
  font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.mx-full .mx-arr{display:inline-block;font-size:13px;line-height:1;transition:transform .25s ease}
.mx-full:hover,.mx-full:focus-visible{text-decoration:underline;text-underline-offset:6px}
.mx-full:hover .mx-arr,.mx-full:focus-visible .mx-arr{transform:translateX(3px)}
.mx-full:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.mx-btn.mx-play::before{content:"";width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.mx-grid{display:grid;grid-template-columns:repeat(var(--cols,3),auto);justify-content:center;justify-items:center;align-items:end;gap:var(--g,22px)}
.mx-thumb{display:block;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in}
.mx-thumb img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.mx-thumb:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.mx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding:18px 0 4px;font:500 11px/1.3 var(--sans);letter-spacing:.12em;color:var(--mute)}
.mx-toggle{display:inline-flex;align-items:center;gap:2px}
.mx-toggle-label{margin-right:8px}
.mx-tg{appearance:none;cursor:pointer;min-height:44px;min-width:44px;padding:0 10px;border:0;background:transparent;color:var(--mute);font:500 11px/1 var(--sans);letter-spacing:.14em}
.mx-tg.is-on{color:var(--fg);text-decoration:underline;text-underline-offset:6px}
.mx-tg:hover{color:var(--fg)}
.mx-tg:focus-visible{outline:2px solid var(--fg);outline-offset:-4px}
.mx-note{letter-spacing:.04em;text-transform:none;font-weight:400}

/* Ausführliche Strecke: eingeklappt, solange die Übersicht gezeigt wird (bleibt gebaut und vermessen; kein Nachladen) */
.mc-strip.is-collapsed{height:0;overflow:hidden;visibility:hidden;padding-top:0;padding-bottom:0;margin:0}
.mc-strip.is-collapsed + .mx-end{display:none}
.mx-link{align-self:flex-start;margin-top:16px;min-height:44px}
.mx-end{max-width:1780px;margin:clamp(30px,5svh,56px) auto 0;padding:0 var(--gut);box-sizing:border-box}

@media (max-width:760px){
  .mc-intro{--mi-ctl:calc(64px + env(safe-area-inset-bottom,0px))}
  .mc-intro .mi-stage{bottom:calc(var(--mi-ctl) + 12px)}
  .mc-intro .mi-ctl{left:var(--gut);right:var(--gut);bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);justify-content:center}
  .mc-intro .mi-btn{flex:1 1 0;min-height:48px;padding:0 6px;font-size:11px;letter-spacing:.12em}
  .mc-intro .mi-cap{bottom:calc(var(--mi-ctl) + 2px);left:50%;transform:translateX(-50%)}
  .mc-index .mx-actions{width:100%}
  .mc-index .mx-actions .mx-btn{flex:1 1 0;padding:0 10px;font-size:11px;letter-spacing:.1em}
  .mc-index .mx-actions{align-items:center}
  .mc-index .mx-head{padding-bottom:20px}
  .mc-index .mx-actions .mx-full{flex:1 1 0;justify-content:flex-end;padding:0 2px;letter-spacing:.1em}
  .mx-foot{justify-content:flex-start}
  .mc-intro .mi-title{font-size:20px;align-items:flex-start}
  /* Handy: Fotos stehen untereinander, jedes von unten (0,7 s), Auftakt 0,8 s */
  .mc-intro .mi-pair .mi-item,.mc-intro .mi-pair .mi-item.is-right,.mc-intro .mi-stagger .mi-item,.mc-intro .mi-solo .mi-item,.mc-intro .mi-finale .mi-item{--from:inset(100% 0 0 0);--to:inset(0 0 100% 0);--rv-d:.7s}
  .mc-intro .mi-hero .mi-item{--rv-d:.8s}
}
@media print{.mc-intro{display:none!important}}

/* ===== v0.13q: Sportswear International ===== */
/* Querformat: Enthüllung von links nach rechts (1,5 s), Schließen läuft in derselben Richtung weiter (linke Kante wandert nach rechts) */
.mc-intro .mi-wipe-ltr .mi-item{--from:inset(0 100% 0 0);--to:inset(0 0 0 100%);--rv-d:1.5s}
/* kleiner Seitentitel im Auftakt (nur wenn die Story es verlangt) */
.mc-intro .mi-title.mi-title-sm{font-size:clamp(17px,1.75vw,26px);line-height:1.2}
/* Fotoübersicht B: Reihen mit eigener Höhe */
.mx-grid.is-rows{display:flex;flex-direction:column;align-items:center;gap:var(--g,22px)}
.mx-row{display:flex;justify-content:center;align-items:flex-end;gap:var(--g,22px);max-width:100%}
@media (max-width:760px){
  .mc-intro .mi-wipe-ltr .mi-item{--from:inset(0 100% 0 0);--to:inset(0 0 0 100%);--rv-d:1.1s}
  .mc-intro .mi-title.mi-title-sm{font-size:18px}
}

/* ===== v0.13r: Menswear (Advertising) ===== */
/* Auftakttitel mit kleinem Kicker darunter (nur wenn die Story cfg.kicker setzt) */
.mc-intro .mi-t-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.mc-intro .mi-t-kick{letter-spacing:.14em}
/* Kicker in der Fotoübersicht: direkt unter der Überschrift, ruhig */
.mc-index .mx-kicker{margin:7px 0 0}
.mc-index .mx-kicker + .mx-label{margin-top:14px}
/* Seitenkopf der Advertising-Seite: in der Übersicht und während der Show ausgeblendet, in der ausführlichen Strecke sichtbar */
.mx-head-off{display:none!important}
/* ausführliche Strecke ohne Auftaktkapitel: Rücksprung und erstes Kapitel unter dem Seitenkopf */
body[data-page="advertising"] #view > .series-head ~ .mc-strip:not(.is-collapsed){padding-top:clamp(18px,3svh,30px)}
.mc-strip > .mx-link-top{margin:0 0 clamp(20px,3.5svh,36px)}

/* ===== v0.13u: NEXT STORY → [Titel] oben in der Fotoübersicht ===== */
/* Desktop: dritter Eintrag der Bedienzeile, durch eine feine Linie abgesetzt; Titel in Normalschrift, damit lange Titel lesbar bleiben */
.mx-next{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-left:4px;padding:0 2px 0 24px;border-left:1px solid var(--line);
  color:var(--fg);text-decoration:none;font:500 11px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;max-width:100%}
.mx-next-l{white-space:nowrap}
.mx-next-t{font-size:13px;letter-spacing:.02em;text-transform:none;font-weight:500;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .2s ease}
.mx-next:hover .mx-next-t,.mx-next:focus-visible .mx-next-t{text-decoration-color:currentColor}
.mx-next:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
@media (max-width:760px){
  /* Handy: eigene Zeile unter den beiden Bedienelementen, volle Breite, 48 px hoch, Linie oben statt links */
  .mc-index .mx-actions .mx-next{flex:1 1 100%;margin:2px 0 0;padding:6px 2px 0;min-height:48px;border-left:0;border-top:1px solid var(--line);gap:10px;justify-content:flex-start}
  .mc-index .mx-next-t{font-size:14px}
}