/* ============================================================================
   MGNTION — KEY ART
   Each composition wears its own product's palette and typeface. The MGNTION
   chassis (frame, hud, rule, mask reveal) is what holds them together.
   ========================================================================= */

.k { width: 100%; height: 100%; position: relative; overflow: hidden; }
.plate__stage--flush { padding: 0 !important; }
.plate__stage--flush > .k { padding-top: 2.6rem; }

/* MIXDNA has no plate — it ships no public build, so its real captures are the
   reveal on their own. See .shots / .shots--lead in sections.css. */

/* ===========================================================================
   ARTFOLIO — a gold-lit hall. Frame colours are the exhibit registry.
=========================================================================== */
.k--art { background: #0b0805; }
.k-art__hall { position: absolute; inset: 0; perspective: 620px; perspective-origin: 50% 46%; overflow: hidden; }
.k-art__ceil {
  position: absolute; inset-inline: 0; top: 0; height: 34%;
  background: linear-gradient(to bottom, #17100a, #0b0805);
}
.k-art__floor {
  position: absolute; inset-inline: 0; bottom: 0; height: 40%;
  background:
    linear-gradient(to bottom, rgba(224,169,78,.10), rgba(11,8,5,0) 62%),
    linear-gradient(to bottom, #241811, #0d0906);
}
.k-art__floor::after {   /* the light pooling on polished stone */
  content: ''; position: absolute; inset-inline: 22%; top: 0; height: 74%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,224,138,.16), transparent 72%);
}
.k-art__wall {
  position: absolute; top: 6%; height: 76%; width: 34%; transform-style: preserve-3d;
  display: flex; flex-direction: column; justify-content: center; gap: 8%;
  padding: 0 2%;
  background: linear-gradient(to bottom, #3a2a1c, #241811 62%, #16100a);
  box-shadow: inset 0 0 90px rgba(0,0,0,.7);
}
.k-art__wall--l { left: -1%;  transform-origin: left center;  transform: rotateY(64deg); }
.k-art__wall--r { right: -1%; transform-origin: right center; transform: rotateY(-64deg); }

.k-art__f {
  position: relative; height: 22%; border: 3px solid var(--fc);
  background: #0a0806; box-shadow: 0 0 26px -4px color-mix(in srgb, var(--fa) 55%, transparent),
              inset 0 0 22px rgba(0,0,0,.85);
  display: grid; place-items: center;
  animation: artGlow 6s var(--e-inout) infinite alternate;
  animation-delay: calc(var(--d) * -1.7s);
}
@keyframes artGlow { from { box-shadow: 0 0 14px -6px color-mix(in srgb, var(--fa) 40%, transparent), inset 0 0 22px rgba(0,0,0,.85); }
                     to   { box-shadow: 0 0 34px -2px color-mix(in srgb, var(--fa) 75%, transparent), inset 0 0 22px rgba(0,0,0,.7); } }
.k-art__canvas {
  position: absolute; inset: 12%;
  background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--fa) 42%, transparent), transparent 72%);
}
.k-art__f em {
  position: absolute; inset-inline: 0; bottom: -1.15em; text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 10px; color: color-mix(in srgb, var(--fa) 80%, #fff); white-space: nowrap;
}
.k-art__vista {
  position: absolute; left: 34%; right: 34%; top: 26%; bottom: 30%;
  background: linear-gradient(to bottom, #2c1f14, #140d08);
  border: 1px solid rgba(224,169,78,.20);
  display: grid; place-items: center;
}
.k-art__door {
  width: 34%; height: 62%; align-self: end;
  background: linear-gradient(to top, rgba(255,224,138,.30), rgba(255,224,138,.02));
  box-shadow: 0 0 60px 10px rgba(224,169,78,.20);
}
.k-art__beam {
  position: absolute; top: 0; width: 20%; height: 66%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,235,180,.16), transparent 78%);
  filter: blur(10px);
}
.k-art__beam--1 { left: 26%; }
.k-art__beam--2 { right: 26%; }

.k-art__hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.k-art__hudtl { position: absolute; top: 3rem; inset-inline-start: 1.1rem; direction: ltr; text-align: left; }
.k-art__hudtl b {
  display: block; font-family: 'Pixelify Sans', var(--f-mono); font-size: 12px;
  letter-spacing: .25em; color: #e0a94e;
}
.k-art__hudtl i {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 12px; color: rgba(242,237,227,.55); margin-top: .1rem;
}
.k-art__now {
  display: block; margin-top: 1.1rem; font-family: var(--f-mono);
  font-size: 8px; letter-spacing: .3em; text-transform: uppercase; color: rgba(242,237,227,.45);
}
.k-art__hudtl em {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-style: normal;
  font-size: 15px; color: #F2EDE3; margin-top: .1rem;
}
.k-art__hudtr { position: absolute; top: 3rem; inset-inline-end: 1.1rem; }
.k-art__pill {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; color: rgba(242,237,227,.6);
  border: 1px solid rgba(242,237,227,.18); border-radius: 100px; padding: .3rem .65rem;
  background: rgba(10,8,6,.6); backdrop-filter: blur(6px); direction: ltr;
}
.k-art__pill s { text-decoration: none; opacity: .4; }
.k-art__keys { position: absolute; bottom: 1rem; inset-inline-start: 1.1rem; display: flex; gap: .3rem; align-items: center; direction: ltr; }
.k-art__keys kbd {
  font-family: var(--f-mono); font-size: 9px; padding: .25rem .42rem;
  border: 1px solid rgba(242,237,227,.22); color: rgba(242,237,227,.7); background: rgba(0,0,0,.5);
}
.k-art__keys kbd.hot { border-color: #e0a94e; color: #e0a94e; }
.k-art__keys span { font-family: var(--f-mono); font-size: 8px; letter-spacing: .18em; color: rgba(242,237,227,.4); margin-inline-start: .3rem; }
.k-art__halls {
  position: absolute; bottom: 1rem; inset-inline-end: 1.1rem; direction: ltr;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 11px; color: rgba(224,169,78,.6);
}

/* ===========================================================================
   03 · VIXXEO — the editor at rest, project NIGHTSHIFT
=========================================================================== */
.k--vix {
  background: #060609; color: #F4F4FA; font-family: 'Instrument Sans', sans-serif;
  direction: ltr; text-align: left; --vx: #966CFF;
  display: flex; flex-direction: column;
}
.k--vix::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 50% at 78% 8%, rgba(150,108,255,.16), transparent 66%);
}
.k-vx__bar {
  position: relative; display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; border-bottom: 1px solid rgba(255,255,255,.07);
}
.k-vx__proj { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.k-vx__chip { font-family: var(--f-mono); font-size: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 100px; padding: .15rem .45rem; color: rgba(255,255,255,.65); }
.k-vx__saved { font-family: var(--f-mono); font-size: 8px; color: rgba(255,255,255,.34); letter-spacing: .12em; }
.k-vx__spacer { flex: 1; }
.k-vx__btn { font-size: 9px; padding: .3rem .6rem; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; color: rgba(255,255,255,.7); }
.k-vx__btn--go { background: var(--vx); border-color: var(--vx); color: #0b0616; font-weight: 600; }
.k-vx__body { position: relative; display: grid; grid-template-columns: 38% 1fr; flex: 1; min-height: 0; }
.k-vx__rail { border-inline-end: 1px solid rgba(255,255,255,.07); padding: .55rem .6rem; overflow: hidden; min-height: 0; }
.k-vx__tabs { display: flex; gap: .8rem; font-size: 9px; margin-bottom: .55rem; color: rgba(255,255,255,.35); }
.k-vx__tabs b { color: #fff; font-weight: 600; border-bottom: 1px solid var(--vx); padding-bottom: .15rem; }
.k-vx__asset { display: flex; gap: .45rem; align-items: center; padding: .28rem 0; border-bottom: 1px solid rgba(255,255,255,.045); }
.k-vx__thumb {
  width: 30px; height: 20px; flex: none; border-radius: 2px;
  background: linear-gradient(135deg, rgba(150,108,255,.42), rgba(255,255,255,.07));
}
.k-vx__asset u { display: block; font-family: var(--f-mono); font-size: 6.5px; letter-spacing: .2em; color: rgba(255,255,255,.7); text-decoration: none; }
.k-vx__asset b { display: block; font-size: 8.5px; font-weight: 500; color: rgba(255,255,255,.9); }
.k-vx__asset i { display: block; font-family: var(--f-mono); font-size: 6.5px; color: rgba(255,255,255,.32); font-style: normal; }
.k-vx__stem { margin-top: .4rem; font-family: var(--f-mono); font-size: 7px; color: rgba(150,108,255,.85); }
.k-vx__stem i { color: rgba(255,255,255,.3); font-style: normal; margin-inline-start: .3rem; }

.k-vx__tl { position: relative; padding: .55rem .7rem; overflow: hidden; }
.k-vx__tlhead { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.k-vx__tlhead b { font-family: var(--f-mono); font-size: 8px; color: rgba(255,255,255,.75); }
.k-vx__cuts { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .14em; color: var(--vx); }
.k-vx__snap { margin-inline-start: auto; font-size: 8px; color: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.12); border-radius: 3px; padding: .1rem .35rem; }
.k-vx__ruler { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 6.5px; color: rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: .2rem; }
.k-vx__tracks { margin-top: .3rem; display: grid; gap: 3px; }
.k-vx__track { display: grid; grid-template-columns: 52px 1fr; gap: .4rem; align-items: center; }
.k-vx__tname { font-size: 7px; color: rgba(255,255,255,.4); white-space: nowrap; }
.k-vx__lane { position: relative; height: 11px; background: rgba(255,255,255,.035); border-radius: 2px; }
.k-vx__lane i {
  position: absolute; inset-block: 1px; left: var(--x); width: var(--w);
  background: linear-gradient(180deg, rgba(150,108,255,.85), rgba(150,108,255,.5));
  border-radius: 2px; border: 1px solid rgba(255,255,255,.14);
}
.k-vx__track:nth-child(2) .k-vx__lane i { background: linear-gradient(180deg, #fbbf24, rgba(251,191,36,.55)); }
.k-vx__track:nth-child(7) .k-vx__lane i { background: linear-gradient(180deg, rgba(56,130,246,.8), rgba(56,130,246,.45)); }
.k-vx__play { position: absolute; top: 2.1rem; bottom: .4rem; left: 41%; width: 1px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.6); }
.k-vx__play::before { content: ''; position: absolute; top: 0; left: -3px; width: 7px; height: 7px; background: #fff; transform: rotate(45deg); }

/* ===========================================================================
   04 · CLOUTWARS — the arena
=========================================================================== */
.k--clout {
  background: #0A0A11; color: #F0F1F9; direction: ltr; text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 3rem 1.2rem 1.1rem;
}
.k--clout::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(50% 44% at 22% 42%, rgba(152,80,255,.22), transparent 70%),
              radial-gradient(50% 44% at 78% 58%, rgba(0,225,226,.16), transparent 70%);
}
.k-cw__slug { position: relative; font-family: var(--f-mono); font-size: 8px; letter-spacing: .22em; color: rgba(240,241,249,.5); }
.k-cw__ring { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(.6rem,2.4vw,1.6rem); align-items: center; width: 100%; max-width: 640px; }
.k-cw__side { border: 1px solid #2E2C3C; background: #13131C; padding: .7rem .6rem .8rem; position: relative; }
.k-cw__side--a { border-color: rgba(152,80,255,.55); box-shadow: 0 0 40px -14px rgba(152,80,255,.7); }
.k-cw__side--b { border-color: rgba(0,225,226,.4);  box-shadow: 0 0 40px -14px rgba(0,225,226,.5); }
.k-cw__tag { font-family: var(--f-mono); font-size: 7px; letter-spacing: .22em; color: rgba(240,241,249,.42); }
.k-cw__art { height: clamp(48px, 11vw, 84px); margin: .5rem 0; display: flex; align-items: flex-end; justify-content: center; gap: 5px; }
.k-cw__art span { width: 16%; background: linear-gradient(180deg, #9850FF, rgba(152,80,255,.15)); }
.k-cw__art span:nth-child(1) { height: 58% } .k-cw__art span:nth-child(2) { height: 92% } .k-cw__art span:nth-child(3) { height: 40% }
.k-cw__art--alt span { background: linear-gradient(180deg, #00E1E2, rgba(0,225,226,.15)); }
.k-cw__art--alt span:nth-child(1) { height: 84% } .k-cw__art--alt span:nth-child(2) { height: 46% } .k-cw__art--alt span:nth-child(3) { height: 70% }
.k-cw__anon { display: block; font-family: 'Press Start 2P', monospace; font-size: 8px; color: #F0F1F9; }
.k-cw__side i { display: block; font-family: var(--f-mono); font-size: 7px; font-style: normal; color: rgba(240,241,249,.34); margin-top: .3rem; }
.k-cw__meter { height: 3px; background: rgba(255,255,255,.08); margin-top: .55rem; }
.k-cw__meter u { display: block; height: 100%; width: var(--v); background: #9850FF; text-decoration: none; animation: cwShift 5s var(--e-inout) infinite alternate; }
.k-cw__meter--b u { background: #00E1E2; }
@keyframes cwShift { from { width: 44% } to { width: 62% } }
.k-cw__vs b { display: block; font-family: 'Press Start 2P', monospace; font-size: clamp(11px, 2.6vw, 18px); color: #fff; }
.k-cw__vs span { display: block; margin-top: .4rem; font-family: var(--f-mono); font-size: 7px; letter-spacing: .2em; color: #00E1E2; }
.k-cw__wars { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.k-cw__wars span {
  font-family: var(--f-mono); font-size: 6.5px; letter-spacing: .16em; padding: .24rem .45rem;
  border: 1px solid #2E2C3C; color: rgba(240,241,249,.45);
}
.k-cw__wars span.on { border-color: #9850FF; color: #9850FF; }
.k-cw__foot { position: relative; }
.k-cw__foot b { font-family: 'Press Start 2P', monospace; font-size: clamp(10px, 2.4vw, 15px); color: #fff; letter-spacing: .04em; }
.k-cw__foot span { display: block; margin-top: .4rem; font-family: var(--f-mono); font-size: 7px; letter-spacing: .3em; color: rgba(240,241,249,.45); }

/* the film opens on demand — it never sits under the artwork */
.plate__watch {
  position: absolute; z-index: 6; inset-inline-end: .8rem; bottom: .8rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; border: 1px solid rgba(242,237,227,.28);
  background: rgba(5,5,5,.72); backdrop-filter: blur(8px);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--warm); transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.plate__watch:hover { border-color: var(--gold); color: var(--gold); }
.plate__watch::before { content: ''; width: 0; height: 0; border-inline-start: 7px solid currentColor; border-block: 4.5px solid transparent; }
[dir='rtl'] .plate__watch::before { transform: scaleX(-1); }

.film { position: fixed; inset: 0; z-index: 9600; background: rgba(3,3,3,.96); display: none; place-items: center; padding: var(--gut); }
.film[open] { display: grid; }
.film video { width: min(100%, 1200px); max-height: 82svh; border: 1px solid var(--rule); background: #000; }
.film__x {
  position: absolute; top: 1.2rem; inset-inline-end: 1.4rem;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; color: var(--warm-2);
}
.film__x:hover { color: var(--gold); }

/* ===========================================================================
   05 · LUMEVE — right-to-left storefront, real catalogue
=========================================================================== */
.k--lum {
  background: #090909; color: #F7F4F5; direction: rtl; text-align: right;
  font-family: 'Jost', sans-serif; padding: 3rem 1.1rem 1rem;
  display: flex; flex-direction: column;
}
.k--lum::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 46% at 82% 4%, rgba(255,196,83,.12), transparent 66%); }
.k-lm__head { position: relative; display: flex; align-items: baseline; gap: .7rem; }
.k-lm__brand { font-family: 'Archivo', sans-serif; font-weight: 800; letter-spacing: .04em; font-size: 13px; }
.k-lm__season { font-size: 9px; color: #FFC453; letter-spacing: .1em; }
.k-lm__hero {
  position: relative; font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(1.3rem, 4.4vw, 2.5rem); line-height: 1.12; margin-top: .5rem;
}
.k-lm__marq {
  position: relative; overflow: hidden; margin: .6rem 0 .7rem;
  border-block: 1px solid rgba(247,244,245,.09); padding: .3rem 0;
}
.k-lm__marq span {
  display: inline-block; white-space: nowrap; font-family: var(--f-mono);
  font-size: 8px; letter-spacing: .3em; color: rgba(247,244,245,.42); direction: ltr;
  animation: lmMarq 22s linear infinite;
}
@keyframes lmMarq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.k-lm__shelf { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; flex: 1; min-height: 0; }
.k-lm__p { position: relative; display: flex; flex-direction: column; min-height: 0; }
.k-lm__p img {
  width: 100%; flex: 1; min-height: 0; object-fit: cover;
  border: 1px solid rgba(247,244,245,.09); background: #0d0d0f;
}
.k-lm__p:nth-child(2) img { border-color: rgba(255,196,83,.5); }
.k-lm__badge {
  position: absolute; top: .3rem; inset-inline-start: .3rem; z-index: 2;
  font-size: 7px; padding: .12rem .3rem; background: #FF2D78; color: #fff; letter-spacing: .04em;
}
.k-lm__p figcaption { padding-top: .35rem; }
.k-lm__p u { display: block; font-size: 7px; letter-spacing: .16em; color: rgba(247,244,245,.42); text-decoration: none; direction: ltr; text-align: right; }
.k-lm__p b { display: block; font-size: 8.5px; font-weight: 500; margin-top: .1rem; line-height: 1.35; }
.k-lm__p i { display: block; font-style: normal; font-size: 9px; color: #FFC453; margin-top: .15rem; direction: ltr; text-align: right; }
.k-lm__strip { position: relative; display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid rgba(247,244,245,.09); }
.k-lm__strip span { font-size: 8px; color: rgba(247,244,245,.5); }
@media (max-width: 700px) { .k-lm__shelf { grid-template-columns: repeat(2,1fr); } }

/* ===========================================================================
   06 · ICED SMOKE — the vault
=========================================================================== */
.k--iced {
  background: #080808; color: #fff; direction: ltr; text-align: left;
  font-family: 'Inter', sans-serif; padding: 3rem 1.1rem 1rem; --ig: #B58D43;
  display: flex; flex-direction: column;
}
.k--iced::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 14% 0%, rgba(181,141,67,.14), transparent 68%); }
.k-ic__top { position: relative; display: flex; align-items: center; gap: .55rem; }
.k-ic__mark {
  width: 24px; height: 24px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--ig); color: var(--ig);
  font-family: 'Bebas Neue', sans-serif; font-size: 12px; letter-spacing: .04em;
}
.k-ic__top b { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: .1em; line-height: 1; }
.k-ic__top i { display: block; font-style: normal; font-family: var(--f-mono); font-size: 6.5px; letter-spacing: .22em; color: rgba(255,255,255,.4); margin-top: .12rem; }
.k-ic__spacer { flex: 1; }
.k-ic__vault { font-family: var(--f-mono); font-size: 7px; letter-spacing: .18em; color: var(--ig); border: 1px solid rgba(181,141,67,.42); padding: .25rem .5rem; }
.k-ic__hero {
  position: relative; font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(1.5rem, 5.2vw, 3rem); line-height: .96; letter-spacing: .01em; margin: .7rem 0 .6rem;
}
.k-ic__hero span { color: var(--ig); }
.k-ic__filters { position: relative; display: flex; align-items: center; gap: .3rem; margin-bottom: .55rem; flex-wrap: wrap; }
.k-ic__filters span { font-size: 7.5px; padding: .2rem .45rem; border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
.k-ic__filters span.on { border-color: var(--ig); color: var(--ig); }
.k-ic__filters em { margin-inline-start: auto; font-style: normal; font-family: var(--f-mono); font-size: 7px; letter-spacing: .16em; color: rgba(255,255,255,.35); }
.k-ic__list { position: relative; flex: 1; min-height: 0; display: grid; align-content: start; gap: 1px; }
.k-ic__row {
  display: grid; grid-template-columns: 20px 1fr auto auto auto auto; gap: .5rem; align-items: center;
  padding: .34rem .4rem; background: rgba(255,255,255,.02); border: 1px solid transparent;
}
.k-ic__row.on { border-color: rgba(181,141,67,.5); background: rgba(181,141,67,.07); }
.k-ic__mono { width: 20px; height: 20px; display: grid; place-items: center; background: rgba(255,255,255,.05); font-family: var(--f-mono); font-size: 6.5px; color: var(--ig); }
.k-ic__meta b { display: block; font-size: 9px; font-weight: 600; }
.k-ic__meta i { display: block; font-style: normal; font-size: 6.5px; color: rgba(255,255,255,.38); letter-spacing: .1em; text-transform: uppercase; }
.k-ic__stat { font-family: var(--f-mono); font-size: 8px; color: rgba(255,255,255,.75); text-align: center; }
.k-ic__stat u { display: block; text-decoration: none; font-size: 5.5px; letter-spacing: .2em; color: rgba(255,255,255,.3); }
.k-ic__lic { font-family: var(--f-mono); font-size: 6.5px; letter-spacing: .1em; color: var(--ig); white-space: nowrap; }
.k-ic__settle { position: relative; display: flex; align-items: center; gap: .45rem; margin-top: .6rem; font-family: var(--f-mono); font-size: 7px; letter-spacing: .16em; color: var(--ig); }
.k-ic__settle i { width: 5px; height: 5px; border-radius: 50%; background: var(--ig); animation: settle 1.8s var(--e-inout) infinite; }
@media (max-width: 700px) {
  .k-ic__row { grid-template-columns: 18px 1fr auto auto; }
  .k-ic__row > :nth-child(5), .k-ic__lic { display: none; }
}

/* ===========================================================================
   07 · MONSEURRO — the one light plate, because the product is light
=========================================================================== */
.k--mon {
  background: #FAF6EF; color: #2C2C2C; direction: rtl;
  display: grid; grid-template-columns: 1.15fr .85fr; --mg: #355E3B; --mgold: #C9A227;
}
.k-mo__store { padding: 3rem 1rem 1rem; display: flex; flex-direction: column; min-height: 0; }
.k-mo__nav { display: flex; gap: .6rem; align-items: baseline; }
.k-mo__nav b { font-family: 'Amiri', serif; font-weight: 700; font-size: 13px; color: var(--mg); }
.k-mo__nav span { font-family: 'Tajawal', sans-serif; font-size: 8px; color: #5B5850; }
.k-mo__hero {
  font-family: 'Amiri', serif; font-weight: 700; color: var(--mg);
  font-size: clamp(1.1rem, 3.4vw, 2rem); line-height: 1.35; margin-top: .5rem;
}
.k-mo__sub { font-family: 'Tajawal', sans-serif; font-size: 8.5px; color: #5B5850; margin-top: .25rem; }
.k-mo__dishes { display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; margin-top: .7rem; flex: 1; min-height: 0; }
.k-mo__d { display: flex; flex-direction: column; min-height: 0; }
.k-mo__d img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 2px; }
.k-mo__d figcaption { padding-top: .3rem; }
.k-mo__d b { display: block; font-family: 'Tajawal', sans-serif; font-size: 8px; font-weight: 500; line-height: 1.3; }
.k-mo__d span { display: flex; align-items: center; gap: .3rem; margin-top: .15rem; }
.k-mo__d i { font-style: normal; font-family: var(--f-mono); font-size: 8px; color: var(--mgold); direction: ltr; }
.k-mo__d u { text-decoration: none; font-family: 'Tajawal', sans-serif; font-size: 6.5px; padding: .06rem .22rem; background: rgba(53,94,59,.1); color: var(--mg); }

.k-mo__admin { background: #FFFDF8; border-inline-start: 1px solid #E6E4E0; padding: 3rem .8rem 1rem; direction: ltr; text-align: left; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; }
.k-mo__ahead { display: flex; align-items: center; justify-content: space-between; }
.k-mo__ahead b { font-size: 10px; font-weight: 600; }
.k-mo__ahead span { font-family: var(--f-mono); font-size: 6.5px; letter-spacing: .18em; color: var(--mg); border: 1px solid rgba(53,94,59,.3); padding: .1rem .3rem; }
.k-mo__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #E6E4E0; border: 1px solid #E6E4E0; margin-top: .55rem; }
.k-mo__stats > div { background: #FFFDF8; padding: .4rem .45rem; }
.k-mo__stats u { display: block; text-decoration: none; font-family: var(--f-mono); font-size: 5.5px; letter-spacing: .16em; color: #8A8580; }
.k-mo__stats b { display: block; font-size: 13px; font-weight: 600; margin-top: .1rem; }
.k-mo__stats b.warn { color: #B4451F; }
.k-mo__stats i { display: block; font-style: normal; font-size: 6.5px; color: #8A8580; }
.k-mo__stats i.up { color: var(--mg); }
.k-mo__chart { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin-top: .7rem; }
.k-mo__chart i {
  flex: 1; height: var(--h); background: var(--mg); opacity: .82; border-radius: 1px 1px 0 0;
  animation: monBar 1.1s var(--e-out) backwards; animation-delay: calc(var(--n) * 70ms);
}
@keyframes monBar { from { height: 0 } }
.k-mo__chartx { display: flex; gap: 3px; margin-top: .2rem; }
.k-mo__chartx span { flex: 1; text-align: center; font-family: var(--f-mono); font-size: 5.5px; color: #8A8580; }
@media (max-width: 760px) {
  .k--mon { grid-template-columns: 1fr; grid-template-rows: 1.25fr .75fr; }
  .k-mo__admin { border-inline-start: 0; border-top: 1px solid #E6E4E0; padding-top: .8rem; }
  .k-mo__store { padding-bottom: .5rem; }
}

/* ===========================================================================
   FRENLOOP — a living Realm, a growing Loop, the next egg already going
=========================================================================== */
.k--fren {
  background: #1A1726; color: #FFF4E2; direction: ltr; text-align: left;
  font-family: 'Geist', var(--f-body), sans-serif; padding: 2.7rem 1rem .8rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.k-fr__env { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.k-fr__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(26,23,38,.94) 6%, rgba(26,23,38,.55) 52%, rgba(26,23,38,.88)),
              linear-gradient(to top, rgba(26,23,38,.96), transparent 46%);
}
.k-fr__top { position: relative; display: flex; align-items: baseline; gap: .7rem; }
.k-fr__top b { font-family: 'Silkscreen', monospace; font-size: 9px; letter-spacing: .1em; color: #F6C9D8; }
.k-fr__top span { font-size: 7.5px; color: rgba(255,244,226,.5); }
.k-fr__top em {
  margin-inline-start: auto; font-style: normal; font-family: 'Silkscreen', monospace; font-size: 6.5px;
  letter-spacing: .1em; padding: .22rem .45rem; border: 1px solid rgba(246,201,216,.4); color: #F6C9D8;
}

.k-fr__mid { position: relative; display: flex; align-items: flex-start; gap: 1rem; flex: 1; min-height: 0; margin-top: .3rem; }
.k-fr__left { flex: 1; min-width: 0; }
.k-fr__realm { font-family: 'Silkscreen', monospace; font-size: 6.5px; letter-spacing: .16em; color: rgba(246,201,216,.8); }
.k-fr__lore {
  font-size: clamp(9px, 1.9vw, 14px); line-height: 1.32; font-weight: 500; margin-top: .3rem;
  max-width: 26ch; text-shadow: 0 2px 14px rgba(26,23,38,.9);
}
.k-fr__cap {
  display: block; margin-top: .7rem; font-family: var(--f-mono); font-size: 6px;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(255,244,226,.42);
}
.k-fr__stages { list-style: none; margin-top: .3rem; display: grid; gap: .14rem; }
.k-fr__stages li { display: flex; align-items: center; gap: .35rem; font-size: 7.5px; color: rgba(255,244,226,.4); }
.k-fr__stages li i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid rgba(255,244,226,.28); flex: none; }
.k-fr__stages li.on { color: #F6C9D8; }
.k-fr__stages li.on i { background: #F6C9D8; border-color: #F6C9D8; box-shadow: 0 0 8px rgba(246,201,216,.8); }

.k-fr__right { flex: none; text-align: center; }
.k-fr__egg {
  width: clamp(40px, 9vw, 74px); height: auto; image-rendering: pixelated;
  filter: drop-shadow(0 8px 22px rgba(246,201,216,.45));
  animation: eggPulse 4s var(--e-inout) infinite;
}
.k-fr__next { display: block; margin-top: .25rem; font-family: var(--f-mono); font-size: 5.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(246,201,216,.7); }

.k-fr__loop { position: relative; }
.k-fr__loopcap { font-family: var(--f-mono); font-size: 6px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,244,226,.45); }
.k-fr__chain { display: flex; align-items: center; gap: .28rem; margin-top: .25rem; }
.k-fr__f {
  width: clamp(20px, 4vw, 34px); aspect-ratio: 1; flex: none;
  display: grid; place-items: center; border-radius: 7px;
  background: rgba(255,244,226,.07); border: 1px solid rgba(246,201,216,.22);
  animation: frenIn 700ms var(--e-out) backwards; animation-delay: calc(var(--n) * 60ms);
}
@keyframes frenIn { from { opacity: 0; transform: translateY(8px) scale(.85) } }
.k-fr__f img { width: 80%; height: auto; image-rendering: pixelated; }
.k-fr__pending {
  width: clamp(20px, 4vw, 34px); aspect-ratio: 1; display: grid; place-items: center; flex: none;
  border-radius: 7px; border: 1px dashed rgba(246,201,216,.35); color: rgba(246,201,216,.6);
  font-size: 11px; line-height: 1;
}

.k-fr__realms { position: relative; display: flex; align-items: center; gap: .22rem; }
.k-fr__r {
  width: clamp(22px, 4.6vw, 40px); aspect-ratio: 16/10; flex: none; overflow: hidden;
  border-radius: 3px; border: 1px solid rgba(255,244,226,.14); opacity: .62;
}
.k-fr__r.on { border-color: #F6C9D8; opacity: 1; box-shadow: 0 0 12px -2px rgba(246,201,216,.7); }
.k-fr__r img { width: 100%; height: 100%; object-fit: cover; }
.k-fr__rcount { margin-inline-start: auto; font-family: 'Silkscreen', monospace; font-size: 6px; letter-spacing: .12em; color: rgba(246,201,216,.75); }

/* ===========================================================================
   YOLKWARS — an arcade cabinet with a season pass inside it
=========================================================================== */
.k--yolk {
  background: #0A0A12; color: #F0F0F0; direction: ltr; text-align: left;
  font-family: 'Press Start 2P', monospace; padding: 2.7rem .9rem .7rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.k--yolk::before { content: ''; position: absolute; inset: 0; background: radial-gradient(56% 44% at 68% 30%, rgba(255,204,0,.13), transparent 70%); }
.k-yk__status { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: 5.5px; letter-spacing: .06em; color: #8888AA; border: 1px solid #3A3A5E; padding: .3rem .4rem; }
.k-yk__status b { color: #00FF88; }
.k-yk__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.k-yk__mark { font-size: clamp(13px, 3.4vw, 26px); color: #FFCC00; letter-spacing: .04em; text-shadow: 3px 3px 0 #FF3366; }
.k-yk__tag { font-size: 5.5px; color: #8888AA; letter-spacing: .08em; margin-top: .35rem; }
.k-yk__egg {
  position: relative; width: clamp(26px, 5.4vw, 44px); aspect-ratio: 5/7; flex: none;
  background: #F0F0F0; border: 2px solid #0A0A12;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  box-shadow: 0 0 26px rgba(255,204,0,.55);
  animation: eggPulse 3.2s var(--e-inout) infinite;
}
.k-yk__yolk { position: absolute; inset: 28%; border-radius: 50%; background: #FFCC00; }
.k-yk__modes { position: relative; display: flex; gap: .28rem; align-items: center; }
.k-yk__modes span { font-size: 5.5px; padding: .3rem .45rem; border: 1px solid #3A3A5E; color: #8888AA; }
.k-yk__modes span.on { border-color: #FFCC00; color: #FFCC00; background: rgba(255,204,0,.1); }
.k-yk__find { margin-inline-start: auto; background: #FFCC00; color: #0A0A12 !important; border-color: #FFCC00 !important; box-shadow: 2px 2px 0 #FF3366; }

.k-yk__season { position: relative; border: 1px solid #3A3A5E; padding: .45rem .5rem; }
.k-yk__srow { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.k-yk__srow b { font-size: 7px; color: #FFCC00; }
.k-yk__srow span { font-size: 5px; color: #FF3366; }
.k-yk__ssub { display: block; font-size: 5px; color: #8888AA; margin-top: .25rem; }
.k-yk__track { display: flex; gap: 2px; margin-top: .4rem; }
.k-yk__track i {
  flex: 1; height: 9px; background: #1A1A2E; border: 1px solid #3A3A5E;
  animation: ykTier 600ms var(--e-out) backwards; animation-delay: calc(var(--n) * 45ms);
}
.k-yk__track i.got { background: #FFCC00; border-color: #FFCC00; }
@keyframes ykTier { from { opacity: 0; transform: scaleY(.2) } }
.k-yk__tiers { display: flex; justify-content: space-between; margin-top: .2rem; font-size: 4.5px; color: #8888AA; }

.k-yk__systems { position: relative; display: flex; flex-wrap: wrap; gap: .22rem; }
.k-yk__systems span { font-size: 5px; padding: .25rem .38rem; border: 1px solid #3A3A5E; color: #8888AA; }
.k-yk__squads { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.k-yk__sq { font-size: 5.5px; padding: .25rem .4rem; border: 1px solid; }
.k-yk__sq--r { color: #FF3366; border-color: #FF3366; }
.k-yk__sq--b { color: #009BFF; border-color: #009BFF; }
.k-yk__vs { font-size: 5px; color: #8888AA; }
.k-yk__ticker { position: relative; overflow: hidden; border-top: 1px solid #3A3A5E; padding-top: .3rem; }
.k-yk__ticker span { display: inline-block; white-space: nowrap; font-size: 5px; color: #FFCC00; animation: lmMarq 20s linear infinite; }

/* ===========================================================================
   MOBILE — the plates recompose rather than shrink
=========================================================================== */
@media (max-width: 760px) {
  .plate__stage--flush > .k { padding-top: 2.2rem; }

  /* ARTFOLIO: less depth, so the hall still reads as a hall */
  .k-art__hall { perspective: 380px; }
  .k-art__wall { width: 40%; }
  .k-art__wall--l { transform: rotateY(56deg); }
  .k-art__wall--r { transform: rotateY(-56deg); }
  .k-art__vista { left: 28%; right: 28%; }
  .k-art__hudtl { top: 2.5rem; }
  .k-art__hudtr { top: 2.5rem; }
  .k-art__halls { display: none; }
  .k-art__f em { font-size: 8px; }

  /* VIXXEO: the media rail is the least legible part at 375px — drop it and
     let the timeline, which is the actual argument, take the whole frame */
  .k-vx__body { grid-template-columns: 1fr; }
  .k-vx__rail { display: none; }
  .k-vx__tname { font-size: 6px; }
  .k-vx__track { grid-template-columns: 42px 1fr; }

  /* CLOUTWARS / LABS */
  .k--clout { gap: .6rem; padding: 2.6rem .8rem .8rem; }
  .k-cw__art { height: clamp(40px, 13vw, 64px); }
  .k-cw__wars span:nth-child(n+5) { display: none; }
  .k--yolk { padding: 2.4rem .7rem .6rem; gap: .35rem; }
  .k-yk__systems span:nth-child(n+5) { display: none; }
  .k-yk__track i:nth-child(n+11) { display: none; }
  .k-yk__tiers { display: none; }

  .k--fren { padding: 2.4rem .8rem .6rem; gap: .4rem; }
  .k-fr__mid { gap: .6rem; }
  .k-fr__lore { max-width: none; }
  .k-fr__stages li:nth-child(n+4) { display: none; }
  .k-fr__f:nth-child(n+7), .k-fr__r:nth-child(n+8) { display: none; }
  .k-fr__top span:nth-child(n+3) { display: none; }

  /* LUMEVE / ICED / MONSEURRO */
  .k--lum { padding: 2.6rem .8rem .8rem; }
  .k-lm__strip span:nth-child(3) { display: none; }
  .k--iced { padding: 2.6rem .8rem .8rem; }
  .k-ic__row:nth-child(n+5) { display: none; }
  .k-mo__dishes { grid-template-columns: repeat(2, 1fr); }
  .k-mo__dishes .k-mo__d:nth-child(3) { display: none; }
  .k-mo__stats { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .k-art__f, .k-yk__egg, .k-fr__egg, .k-fr__f, .k-mo__chart i, .k-yk__track i,
  .k-lm__marq span, .k-yk__ticker span, .k-cw__meter u, .k-ic__settle i { animation: none !important; }
}