/* ==========================================================================
   XZONE MEDIA — Artist Portal.

   A separate surface from the public site. It shares the house's ink, crimson
   and Geist so it is recognisably the same company, but it is laid out like an
   instrument rather than a brochure: a fixed rail, dense cards, and numbers
   that are the biggest thing on the screen.

   Colour decisions worth recording, because they are the ones most often got
   wrong:

   The charts use one hue. A ranked bar chart of plays by platform is a
   magnitude chart, not an identity chart — the length of the bar says
   everything, and painting each row a different colour would imply a
   relationship between platform and hue that does not exist, while making the
   whole thing unreadable to a colourblind artist. One accent, one track
   behind it, a number at the end of every bar.

   Rise and fall are shown with an arrow and a signed number first and colour
   second, because green and crimson are the one pair that deuteranopia
   collapses, and roughly one man in twelve has it.
   ========================================================================== */

.xzp {
  --bg:#09090C;
  --surface:#0E0E13;
  --surface-2:#14141B;
  --surface-3:#1A1A22;
  --ink:#F4F4F7;
  --ink-2:#9D9DA8;
  --ink-3:#6B6B76;
  --line:rgba(255,255,255,0.075);
  --line-2:rgba(255,255,255,0.14);

  --accent:#FF5A70;
  --accent-deep:#BC1C34;
  --accent-wash:rgba(255,90,112,0.14);
  --accent-edge:rgba(255,90,112,0.34);

  --good:#2FBE85;
  --warn:#F0A33C;
  --info:#5B9BF2;
  --violet:#9085E9;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-pill:999px;

  --rail-w:252px;
  --ease:cubic-bezier(.32,.72,0,1);

  color-scheme:dark;
}

/* ---- reset, at zero specificity so every component rule below wins ---- */

.xzp :where(*,*::before,*::after){ box-sizing:border-box; }
.xzp :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,fieldset){ margin:0; padding:0; }
.xzp :where(ul,ol){ list-style:none; }
.xzp :where(img,svg,video,canvas){ display:block; max-width:100%; }
.xzp :where(a){ color:inherit; text-decoration:none; }
.xzp :where(button,input,select,textarea){ font:inherit; color:inherit; }
.xzp :where(fieldset){ border:0; }
.xzp :where(table){ border-collapse:collapse; width:100%; }

html, body.xzp-body{ background:#09090C; }

body.xzp-body{
  margin:0;
  font-family:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.xzp :focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* Numbers line up in columns. Tabular figures are not a nicety here. */
.xzp .num{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* ==========================================================================
   The shell
   ========================================================================== */

.xzp-shell{
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  min-height:100svh;
}

/* ---- the rail ---- */

.xzp-rail{
  position:sticky; top:0; align-self:start;
  height:100svh; display:flex; flex-direction:column;
  padding:22px 16px 18px;
  background:linear-gradient(180deg, #0B0B10, #09090C);
  border-right:1px solid var(--line);
}

.xzp-brand{
  display:flex; align-items:center; gap:10px;
  padding:4px 8px 22px;
}
.xzp-brand__mark{
  width:30px; height:30px; flex:0 0 30px; border-radius:9px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, var(--accent), var(--accent-deep));
  color:#fff; font-weight:700; font-size:13px; letter-spacing:-0.03em;
}
.xzp-brand__n{ font-size:13.5px; font-weight:600; letter-spacing:-0.012em; line-height:1.15; }
.xzp-brand__s{ font-size:11px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; }

.xzp-nav{ display:flex; flex-direction:column; gap:2px; }
.xzp-nav__h{
  padding:16px 10px 7px; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.xzp-nav__i{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:9px 10px; border-radius:var(--r-sm);
  font-size:14px; font-weight:450; color:var(--ink-2);
  transition:background 160ms var(--ease), color 160ms var(--ease);
}
.xzp-nav__i svg{ width:17px; height:17px; flex:0 0 17px; opacity:.85; }
.xzp-nav__i:hover{ background:var(--surface-2); color:var(--ink); }
.xzp-nav__i.is-on{ background:var(--accent-wash); color:var(--ink); }
.xzp-nav__i.is-on::before{
  content:''; position:absolute; left:-16px; top:50%; translate:0 -50%;
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--accent);
}
.xzp-nav__b{
  margin-left:auto; min-width:19px; height:19px; padding:0 6px; border-radius:var(--r-pill);
  display:grid; place-items:center; background:var(--accent); color:#fff;
  font-size:11px; font-weight:600;
}

.xzp-rail__foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.xzp-who{ display:flex; align-items:center; gap:10px; padding:8px 8px 10px; }
.xzp-who__a{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%; overflow:hidden;
  background:var(--surface-3); display:grid; place-items:center;
  font-size:12px; font-weight:600; color:var(--ink-2);
}
.xzp-who__a img{ width:100%; height:100%; object-fit:cover; }
.xzp-who__n{ font-size:13.5px; font-weight:500; line-height:1.2; }
.xzp-who__r{ font-size:11.5px; color:var(--ink-3); }
.xzp-out{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 10px; border-radius:var(--r-sm); border:0; background:none;
  font-size:13px; color:var(--ink-3); cursor:pointer;
  transition:background 160ms var(--ease), color 160ms var(--ease);
}
.xzp-out:hover{ background:var(--surface-2); color:var(--ink); }
.xzp-out svg{ width:16px; height:16px; }

/* ---- the main column ---- */

.xzp-main{ min-width:0; display:flex; flex-direction:column; }

.xzp-top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding:18px 32px; min-height:74px;
  background:rgba(9,9,12,.82);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.xzp-top__t{ font-size:19px; font-weight:600; letter-spacing:-0.018em; }
.xzp-top__s{ font-size:12.5px; color:var(--ink-3); margin-top:1px; }
.xzp-top__r{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.xzp-body-in{ padding:26px 32px 64px; max-width:1480px; width:100%; }

@media (max-width:1080px){
  .xzp{ --rail-w:76px; }
  .xzp-brand__t, .xzp-nav__i span, .xzp-nav__h, .xzp-who__t{ display:none; }
  .xzp-nav__i{ justify-content:center; padding:11px 0; }
  .xzp-who{ justify-content:center; }
  .xzp-out{ justify-content:center; }
  .xzp-out span{ display:none; }
}

@media (max-width:760px){
  .xzp-shell{ grid-template-columns:minmax(0,1fr); }
  .xzp-rail{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:40;
    height:auto; flex-direction:row; align-items:center;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    border-right:0; border-top:1px solid var(--line);
    background:rgba(11,11,16,.94);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  }
  .xzp-brand, .xzp-rail__foot, .xzp-nav__h{ display:none; }
  .xzp-nav{ flex-direction:row; width:100%; justify-content:space-around; gap:0; }
  .xzp-nav__i{ flex-direction:column; gap:4px; padding:6px 4px; flex:1; border-radius:12px; }
  .xzp-nav__i span{ display:block; font-size:10.5px; letter-spacing:-0.005em; }
  .xzp-nav__i.is-on::before{ display:none; }
  .xzp-nav__b{ position:absolute; top:2px; right:50%; translate:18px 0; }
  .xzp-top{ padding:14px 18px; min-height:62px; }
  .xzp-top__t{ font-size:17px; }
  .xzp-body-in{ padding:18px 18px 110px; }
}

/* ==========================================================================
   Cards, the common furniture
   ========================================================================== */

.xzp-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0) 120px), var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px;
}
.xzp-card--pad0{ padding:0; overflow:hidden; }

.xzp-card__h{
  display:flex; align-items:flex-start; gap:14px; margin-bottom:16px;
}
.xzp-card__t{ font-size:14.5px; font-weight:600; letter-spacing:-0.01em; }
.xzp-card__s{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.xzp-card__r{ margin-left:auto; display:flex; align-items:center; gap:8px; }

.xzp-grid{ display:grid; gap:16px; }
.xzp-grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.xzp-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.xzp-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.xzp-grid--7030{ grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); }
.xzp-grid--3070{ grid-template-columns:minmax(0,1fr) minmax(0,1.9fr); }

@media (max-width:1240px){
  .xzp-grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .xzp-grid--7030,.xzp-grid--3070,.xzp-grid--3{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:620px){
  .xzp-grid--4,.xzp-grid--2{ grid-template-columns:minmax(0,1fr); }
}

.xzp-stack{ display:flex; flex-direction:column; gap:16px; }
.xzp-sec{ margin-top:26px; }
.xzp-sec__h{
  display:flex; align-items:baseline; gap:12px; margin-bottom:13px;
}
.xzp-sec__t{ font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.xzp-sec__l{ margin-left:auto; font-size:13px; color:var(--ink-2); }
.xzp-sec__l:hover{ color:var(--accent); }

/* ==========================================================================
   The headline figures
   ========================================================================== */

.xzp-stat{
  display:flex; flex-direction:column; gap:10px;
  padding:18px 20px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 90px), var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.xzp-stat__k{
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--ink-3);
}
.xzp-stat__k svg{ width:14px; height:14px; opacity:.7; }
.xzp-stat__v{
  font-size:clamp(28px, 3.2vw, 38px); font-weight:600;
  letter-spacing:-0.035em; line-height:1; color:var(--ink);
}
.xzp-stat__v small{ font-size:.46em; font-weight:500; letter-spacing:-0.01em; color:var(--ink-3); margin-left:2px; }
.xzp-stat__f{ display:flex; align-items:center; gap:10px; min-height:20px; }

/* The arrow and the sign carry the direction; the colour only agrees with
   them. Never the colour alone. */
.xzp-delta{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12.5px; font-weight:550; letter-spacing:-0.005em;
  padding:2px 7px 2px 5px; border-radius:var(--r-pill);
}
.xzp-delta svg{ width:12px; height:12px; }
.xzp-delta--up{ color:var(--good); background:rgba(47,190,133,.12); }
.xzp-delta--down{ color:var(--warn); background:rgba(240,163,60,.12); }
.xzp-delta--flat{ color:var(--ink-3); background:var(--surface-2); }
.xzp-stat__n{ font-size:12px; color:var(--ink-3); }

.xzp-spark{ height:34px; width:100%; overflow:visible; }

/* ==========================================================================
   Charts
   ========================================================================== */

.xzp-chart{ position:relative; width:100%; }
.xzp-chart svg{ width:100%; height:auto; overflow:visible; }

.xzp-ax{ font-size:11px; fill:var(--ink-3); font-variant-numeric:tabular-nums; }
.xzp-grid-l{ stroke:var(--line); stroke-width:1; shape-rendering:crispEdges; }
.xzp-line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.xzp-area{ fill:url(#xzpFade); }
.xzp-dot{ fill:var(--accent); stroke:var(--surface); stroke-width:2; }
.xzp-cross{ stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 3; }

.xzp-tip{
  position:absolute; z-index:5; pointer-events:none;
  padding:9px 11px; border-radius:11px; min-width:132px;
  background:rgba(20,20,27,.96); border:1px solid var(--line-2);
  box-shadow:0 14px 38px rgba(0,0,0,.55);
  font-size:12.5px; opacity:0; translate:0 4px;
  transition:opacity 120ms var(--ease), translate 120ms var(--ease);
}
.xzp-tip.is-on{ opacity:1; translate:0 0; }
.xzp-tip__d{ color:var(--ink-3); font-size:11.5px; margin-bottom:3px; }
.xzp-tip__v{ font-weight:600; font-size:15px; letter-spacing:-0.02em; }
.xzp-tip__v small{ font-weight:450; color:var(--ink-3); font-size:11.5px; margin-left:3px; }

/* ---- ranked bars: one hue, length does the work, value always written ---- */

.xzp-rank{ display:flex; flex-direction:column; gap:3px; }
.xzp-rank__i{
  display:grid; grid-template-columns:minmax(84px,auto) minmax(0,1fr) auto;
  align-items:center; gap:12px; padding:7px 8px; border-radius:10px;
  transition:background 140ms var(--ease);
}
.xzp-rank__i:hover{ background:var(--surface-2); }
.xzp-rank__n{
  font-size:13px; color:var(--ink-2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.xzp-rank__t{
  position:relative; height:8px; border-radius:var(--r-pill);
  background:rgba(255,255,255,0.045); overflow:hidden;
}
.xzp-rank__f{
  position:absolute; inset:0 auto 0 0; border-radius:var(--r-pill);
  background:var(--accent);
  transition:width 600ms var(--ease);
}
.xzp-rank__v{ font-size:13px; font-weight:550; letter-spacing:-0.01em; white-space:nowrap; }
.xzp-rank__p{ font-size:11.5px; color:var(--ink-3); margin-left:6px; font-weight:400; }

/* ==========================================================================
   Releases
   ========================================================================== */

.xzp-rel{
  display:grid; grid-template-columns:62px minmax(0,1fr) auto;
  align-items:center; gap:16px;
  padding:13px 16px; border-radius:var(--r-md);
  border:1px solid transparent;
  transition:background 160ms var(--ease), border-color 160ms var(--ease);
}
.xzp-rel:hover{ background:var(--surface-2); border-color:var(--line); }
.xzp-rel__art{
  width:62px; height:62px; border-radius:11px; overflow:hidden;
  background:var(--surface-3); display:grid; place-items:center;
  border:1px solid var(--line);
}
.xzp-rel__art img{ width:100%; height:100%; object-fit:cover; }
.xzp-rel__art svg{ width:22px; height:22px; opacity:.3; }
.xzp-rel__t{ font-size:15px; font-weight:550; letter-spacing:-0.012em; }
.xzp-rel__m{ font-size:12.5px; color:var(--ink-3); margin-top:3px; display:flex; flex-wrap:wrap; gap:4px 10px; }
.xzp-rel__r{ display:flex; align-items:center; gap:18px; }
.xzp-rel__fig{ text-align:right; }
.xzp-rel__fig b{ display:block; font-size:15px; font-weight:600; letter-spacing:-0.02em; }
.xzp-rel__fig span{ font-size:11.5px; color:var(--ink-3); }

@media (max-width:720px){
  .xzp-rel{ grid-template-columns:52px minmax(0,1fr); gap:12px; }
  .xzp-rel__art{ width:52px; height:52px; }
  .xzp-rel__r{ grid-column:1 / -1; justify-content:space-between; padding-top:4px; }
}

/* ---- status badges: a dot, a word, and a colour, in that order ---- */

.xzp-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px 3px 8px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:550; letter-spacing:.005em; white-space:nowrap;
  border:1px solid transparent;
}
.xzp-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px; }
.xzp-pill--muted { color:var(--ink-2);  background:rgba(255,255,255,.05);  border-color:var(--line); }
.xzp-pill--blue  { color:var(--info);   background:rgba(91,155,242,.12);   border-color:rgba(91,155,242,.24); }
.xzp-pill--amber { color:var(--warn);   background:rgba(240,163,60,.12);   border-color:rgba(240,163,60,.24); }
.xzp-pill--violet{ color:var(--violet); background:rgba(144,133,233,.12);  border-color:rgba(144,133,233,.26); }
.xzp-pill--green { color:var(--good);   background:rgba(47,190,133,.12);   border-color:rgba(47,190,133,.26); }
.xzp-pill--red   { color:var(--accent); background:var(--accent-wash);     border-color:var(--accent-edge); }

/* ---- the delivery timeline on a release ---- */

.xzp-steps{ display:flex; flex-direction:column; gap:0; }
.xzp-step{ position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; padding-bottom:18px; }
.xzp-step:last-child{ padding-bottom:0; }
.xzp-step__m{
  position:relative; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-3);
}
.xzp-step__m svg{ width:13px; height:13px; }
.xzp-step:not(:last-child) .xzp-step__m::after{
  content:''; position:absolute; top:28px; left:50%; translate:-50% 0;
  width:1px; height:calc(100% + 18px - 28px); min-height:18px; background:var(--line);
}
.xzp-step.is-done .xzp-step__m{ background:var(--accent-wash); border-color:var(--accent-edge); color:var(--accent); }
.xzp-step.is-now .xzp-step__m{ background:var(--accent); border-color:var(--accent); color:#fff; }
.xzp-step.is-done:not(:last-child) .xzp-step__m::after{ background:var(--accent-edge); }
.xzp-step__t{ font-size:13.5px; font-weight:550; }
.xzp-step__s{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }

/* ==========================================================================
   Tables
   ========================================================================== */

.xzp-tbl{ font-size:13.5px; }
.xzp-tbl th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
  padding:0 14px 10px; border-bottom:1px solid var(--line);
}
.xzp-tbl td{ padding:12px 14px; border-bottom:1px solid var(--line); }
.xzp-tbl tr:last-child td{ border-bottom:0; }
.xzp-tbl tbody tr{ transition:background 140ms var(--ease); }
.xzp-tbl tbody tr:hover{ background:var(--surface-2); }
.xzp-tbl .r{ text-align:right; }
.xzp-tbl__wrap{ overflow-x:auto; margin:0 -20px; padding:0 20px; }

/* ==========================================================================
   Controls
   ========================================================================== */

.xzp-seg{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill);
}
.xzp-seg button{
  padding:5px 13px; border:0; background:none; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:500; color:var(--ink-3); cursor:pointer;
  transition:background 160ms var(--ease), color 160ms var(--ease);
}
.xzp-seg button:hover{ color:var(--ink); }
.xzp-seg button[aria-pressed="true"]{ background:var(--accent); color:#fff; }

.xzp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:var(--r-pill); border:1px solid transparent;
  font-size:14px; font-weight:550; letter-spacing:-0.006em; cursor:pointer;
  transition:background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.xzp-btn svg{ width:15px; height:15px; }
.xzp-btn--p{ background:var(--accent); color:#fff; }
.xzp-btn--p:hover{ background:#ff7085; }
.xzp-btn--g{ background:var(--surface-2); border-color:var(--line); color:var(--ink); }
.xzp-btn--g:hover{ border-color:var(--line-2); background:var(--surface-3); }
.xzp-btn--w{ width:100%; }
.xzp-btn:active{ transform:translateY(1px); }
.xzp-btn[disabled]{ opacity:.5; pointer-events:none; }

.xzp-field{ display:block; margin-bottom:15px; }
.xzp-field__l{ display:block; font-size:12.5px; font-weight:500; color:var(--ink-2); margin-bottom:7px; }
.xzp-field__i{
  width:100%; padding:11px 14px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  font-size:15px; transition:border-color 160ms var(--ease), background 160ms var(--ease);
}
.xzp-field__i::placeholder{ color:var(--ink-3); }
.xzp-field__i:focus{ border-color:var(--accent-edge); background:var(--surface-3); outline:none; }
.xzp-field__h{ font-size:12px; color:var(--ink-3); margin-top:6px; }

.xzp-check{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-2); cursor:pointer; }
.xzp-check input{ width:16px; height:16px; accent-color:var(--accent); }

/* A field no human sees; only a script fills it in. */
.xzp-pot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ==========================================================================
   Messages and empty states
   ========================================================================== */

.xzp-note{
  display:flex; gap:11px; padding:13px 15px; border-radius:var(--r-md);
  font-size:13.5px; line-height:1.45; border:1px solid var(--line);
  background:var(--surface-2);
}
.xzp-note svg{ width:16px; height:16px; flex:0 0 16px; margin-top:2px; }
.xzp-note--bad{ color:#ffd4da; background:var(--accent-wash); border-color:var(--accent-edge); }
.xzp-note--ok{ color:#c9f3e2; background:rgba(47,190,133,.1); border-color:rgba(47,190,133,.26); }
.xzp-note--warn{ color:#ffe6c4; background:rgba(240,163,60,.1); border-color:rgba(240,163,60,.26); }
.xzp-note b{ font-weight:600; }

.xzp-empty{ text-align:center; padding:46px 24px; }
.xzp-empty__g{
  width:46px; height:46px; margin:0 auto 16px; border-radius:14px;
  display:grid; place-items:center; background:var(--surface-2);
  border:1px solid var(--line); color:var(--ink-3);
}
.xzp-empty__g svg{ width:20px; height:20px; }
.xzp-empty__t{ font-size:15.5px; font-weight:550; margin-bottom:5px; }
.xzp-empty__s{ font-size:13.5px; color:var(--ink-3); max-width:380px; margin:0 auto; line-height:1.55; }

.xzp-msg{
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:13px;
  padding:14px 4px; border-bottom:1px solid var(--line);
}
.xzp-msg:last-child{ border-bottom:0; }
.xzp-msg__g{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); }
.xzp-msg__g svg{ width:15px; height:15px; }
.xzp-msg--info .xzp-msg__g{ color:var(--info); }
.xzp-msg--good .xzp-msg__g{ color:var(--good); }
.xzp-msg--warn .xzp-msg__g{ color:var(--warn); }
.xzp-msg--bad .xzp-msg__g{ color:var(--accent); }
.xzp-msg__t{ font-size:13.5px; font-weight:550; }
.xzp-msg__b{ font-size:13px; color:var(--ink-2); margin-top:3px; line-height:1.5; }
.xzp-msg__d{ font-size:11.5px; color:var(--ink-3); margin-top:5px; }
.xzp-msg.is-new .xzp-msg__t::after{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-left:7px; vertical-align:middle;
}

/* ==========================================================================
   The door
   ========================================================================== */

.xzp-door{
  min-height:100svh; display:grid; place-items:center;
  padding:32px 20px;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(188,28,52,.17), transparent 62%),
    radial-gradient(760px 520px at 86% 108%, rgba(255,90,112,.09), transparent 60%),
    #09090C;
}
.xzp-door__box{ width:100%; max-width:392px; }
.xzp-door__head{ text-align:center; margin-bottom:26px; }
.xzp-door__mark{
  width:46px; height:46px; margin:0 auto 18px; border-radius:14px;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:17px;
  letter-spacing:-0.04em;
  background:linear-gradient(150deg, var(--accent), var(--accent-deep));
  box-shadow:0 14px 40px rgba(188,28,52,.4);
}
.xzp-door__t{ font-size:23px; font-weight:600; letter-spacing:-0.028em; }
.xzp-door__s{ font-size:13.5px; color:var(--ink-3); margin-top:7px; line-height:1.5; }
.xzp-door__card{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 130px), var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px 24px;
}
.xzp-door__foot{ margin-top:18px; text-align:center; font-size:12.5px; color:var(--ink-3); line-height:1.6; }
.xzp-door__foot a{ color:var(--ink-2); border-bottom:1px solid var(--line-2); padding-bottom:1px; }
.xzp-door__foot a:hover{ color:var(--accent); border-color:var(--accent-edge); }
.xzp-door__shut{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-3); line-height:1.6; text-align:center;
}

/* ==========================================================================
   Profile
   ========================================================================== */

.xzp-hero{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:
    radial-gradient(620px 300px at 12% -30%, rgba(188,28,52,.3), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 160px),
    var(--surface);
  padding:26px;
}
.xzp-hero__in{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.xzp-hero__a{
  width:88px; height:88px; flex:0 0 88px; border-radius:24px; overflow:hidden;
  background:var(--surface-3); border:1px solid var(--line-2);
  display:grid; place-items:center; font-size:28px; font-weight:600; color:var(--ink-3);
}
.xzp-hero__a img{ width:100%; height:100%; object-fit:cover; }
.xzp-hero__n{ font-size:clamp(23px,3vw,31px); font-weight:600; letter-spacing:-0.03em; line-height:1.08; }
.xzp-hero__m{ display:flex; flex-wrap:wrap; gap:7px 16px; margin-top:9px; font-size:13px; color:var(--ink-3); }
.xzp-hero__m b{ color:var(--ink-2); font-weight:550; }
.xzp-hero__r{ margin-left:auto; display:flex; gap:10px; }

@media (max-width:620px){
  .xzp-hero{ padding:20px; }
  .xzp-hero__a{ width:66px; height:66px; flex-basis:66px; border-radius:19px; font-size:22px; }
  .xzp-hero__r{ margin-left:0; width:100%; }
}

/* ==========================================================================
   Motion, only where it means something
   ========================================================================== */

@keyframes xzpIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.xzp-in{ animation:xzpIn 420ms var(--ease) both; }
.xzp-in:nth-child(2){ animation-delay:40ms; }
.xzp-in:nth-child(3){ animation-delay:80ms; }
.xzp-in:nth-child(4){ animation-delay:120ms; }

.xzp-busy{ opacity:.45; pointer-events:none; transition:opacity 200ms var(--ease); }

@media (prefers-reduced-motion:reduce){
  .xzp *, .xzp *::before, .xzp *::after{
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* The screen-reader-only helper, for labels that must exist but not show. */
.xzp-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}


/* ==========================================================================
   Stacking the paired labels.

   A span is an inline box, so a title and the line under it run together on
   one line unless told otherwise. The markup uses spans rather than block
   elements because several of these pairs sit inside an anchor, where a <p>
   is not allowed. The fix belongs here rather than in the markup.
   ========================================================================== */

.xzp-msg__t, .xzp-msg__b, .xzp-msg__d,
.xzp-step__t, .xzp-step__s,
.xzp-rel__t, .xzp-rel__m,
.xzp-who__t, .xzp-who__n, .xzp-who__r,
.xzp-brand__t, .xzp-brand__n, .xzp-brand__s{
  display:block;
}

/* The unread mark reads as part of the title, so it sits after the words
   rather than between the title and the body. */
.xzp-msg.is-new .xzp-msg__t{ display:flex; align-items:center; gap:7px; }
.xzp-msg.is-new .xzp-msg__t::after{ margin-left:0; flex:0 0 6px; }

/* The three-line message block wants a little air between its parts. */
.xzp-msg > span:last-child{ min-width:0; }


/* Type, track count and date sit side by side, which without a mark between
   them reads as one run-on sentence rather than three facts. */
.xzp-rel__m > span + span::before{ content:"\00b7"; margin-right:10px; opacity:.55; }
.xzp-hero__m > span + span::before{ content:"\00b7"; margin-right:16px; opacity:.55; }


/* ==========================================================================
   The site footer, carried on into the portal.

   Quieter than the public one, because down here it is a reassurance rather
   than a destination: it says you are still on xzonemedia.com and here is how
   to reach the people behind it, without competing with the figures above.
   ========================================================================== */

.xzp-foot{
  margin-top:46px; padding:28px 32px 36px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0));
}
.xzp-foot__top{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:18px; margin-bottom:20px;
}
.xzp-foot__logo{ display:block; color:var(--ink); opacity:.92; }
.xzp-foot__logo:hover{ opacity:1; }
.xzp-foot__mark{ display:block; height:26px; width:auto; }

.xzp-foot__dots{ display:flex; gap:8px; }
.xzp-foot__dot{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-3); border:1px solid var(--line);
  transition:color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.xzp-foot__dot:hover{ color:var(--ink); border-color:var(--accent-edge); background:var(--accent-wash); }

.xzp-foot__mid{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px 26px;
  padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.xzp-foot__nav, .xzp-foot__reach{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.xzp-foot__link{
  font-size:13.5px; color:var(--ink-2);
  transition:color 180ms var(--ease);
}
.xzp-foot__link:hover{ color:var(--accent); }

.xzp-foot__legal{
  margin-top:16px; font-size:11.5px; line-height:1.6; color:var(--ink-3);
}
.xzp-foot__legal span{ display:block; margin-top:2px; }

@media (max-width:760px){
  .xzp-foot{ padding:24px 18px 30px; margin-top:34px; }
  .xzp-foot__mid{ flex-direction:column; align-items:flex-start; gap:12px; }
}

/* The door pages carry it too, centred under the card. */
.xzp-door .xzp-foot{
  margin-top:34px; padding:22px 0 0; border-top:1px solid var(--line);
  background:none; width:100%;
}
.xzp-door__box .xzp-foot__top{ justify-content:center; margin-bottom:16px; }
.xzp-door__box .xzp-foot__logo{ display:none; }
.xzp-door__box .xzp-foot__mid{ justify-content:center; border-bottom:0; padding-bottom:0; }
.xzp-door__box .xzp-foot__nav{ justify-content:center; }
.xzp-door__box .xzp-foot__reach{ justify-content:center; }
.xzp-door__box .xzp-foot__legal{ text-align:center; }

/* ==========================================================================
   The site bar, continued.

   An artist signing in has not left xzonemedia.com, so the public header runs
   across the top of every portal page and the public footer across the bottom
   of it. The bar holds the top on desktop, which is why everything that used
   to stick to 0 now sticks under it; on a phone it scrolls away, because the
   rail has already become a bottom tab bar and the screen cannot spare 59px
   of chrome twice.
   ========================================================================== */

.xzp-bar{
  position:sticky; top:0; z-index:60;
  background:rgba(9,9,12,.9);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.xzp-bar__in{
  display:flex; align-items:center; gap:18px;
  min-height:58px; padding:8px 32px;
}
.xzp-bar__logo{ flex:0 0 auto; display:flex; align-items:center; color:var(--ink); opacity:.94; }
.xzp-bar__logo:hover{ opacity:1; }
.xzp-bar__nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.xzp-bar__link{
  padding:8px 11px; border-radius:9px;
  font-size:11.5px; font-weight:600; letter-spacing:.1em;
  color:var(--ink-2);
  transition:color .16s var(--ease), background-color .16s var(--ease);
}
.xzp-bar__link:hover{ color:var(--ink); background:rgba(255,255,255,.055); }
.xzp-bar__cta{
  flex:0 0 auto; padding:9px 17px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; white-space:nowrap;
  color:#fff; background:linear-gradient(180deg, var(--accent), var(--accent-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:filter .16s var(--ease);
}
.xzp-bar__cta:hover{ filter:brightness(1.07); }

.xzp-bar + .xzp-shell{ min-height:calc(100svh - 59px); }
.xzp-bar + .xzp-shell .xzp-rail{ top:59px; height:calc(100svh - 59px); }
.xzp-bar + .xzp-shell .xzp-top{ top:59px; }
.xzp-bar + .xzp-door{ min-height:calc(100svh - 59px); }

@media (max-width:1080px){
  .xzp-bar__in{ gap:12px; padding:8px 20px; }
  .xzp-bar__link{ padding:8px 8px; letter-spacing:.06em; }
}

@media (max-width:900px){
  .xzp-bar__nav{ display:none; }
  .xzp-bar__cta{ margin-left:auto; }
}

@media (max-width:760px){
  .xzp-bar{ position:static; }
  .xzp-bar__in{ min-height:52px; padding:7px 18px; }
  .xzp-bar + .xzp-shell{ min-height:0; }
  .xzp-bar + .xzp-shell .xzp-rail{ top:auto; height:auto; }
  .xzp-bar + .xzp-shell .xzp-top{ top:0; }
  .xzp-bar + .xzp-door{ min-height:0; }
}