/* WizDance AI — shared styles for the Magazine pages.
   Same tokens as the homepage; kept in one file because these are multi-page. */
:root{
  --periwinkle:#9B8CFF; --grape:#A78BFF; --blossom:#FF8FB8; --peach:#FFB68C;
  --sky:#9FD4FF; --amber:#F0A33C; --magenta:#E01E8B;
  --ink:#120B20; --ink-2:#180F2A; --stage:#0C0617;
  --text:#F4F0FA; --body-c:#B6ACC9; --muted:#8E85A6;
  --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.075);
  --disp:'Plus Jakarta Sans',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --grad:linear-gradient(120deg,#9B8CFF,#C490F0,#FF8FB8);
  --wordgrad:linear-gradient(115deg,#A46BFF,#E01E8B);
  --accent:linear-gradient(100deg,#FF3D9A,#F5A63C);
  --shadow:0 20px 46px -24px rgba(0,0,0,.65);
  --shadow-lg:0 40px 80px -34px rgba(0,0,0,.75);
  --line:rgba(255,255,255,.09);
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--body-c); position:relative;
  font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:absolute; top:0; left:0; right:0; height:900px; pointer-events:none; z-index:0;
  background:
    radial-gradient(1450px 760px at 44% -60px, rgba(140,55,238,.42), transparent 72%),
    radial-gradient(950px 620px at 100% 40px, rgba(224,30,139,.24), transparent 72%);
}
main{position:relative; z-index:1}
h1,h2,h3,h4{font-family:var(--disp); line-height:1.18; letter-spacing:-.02em; margin:0; color:var(--text)}
p{margin:0}
a{color:var(--grape)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.eyebrow{
  font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-bottom:14px; display:block;
}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:rgba(18,11,32,.82); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:28px; height:70px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.brand img{width:34px; height:34px; border-radius:9px; object-fit:contain}
.brand span{font-family:var(--disp); font-weight:800; font-size:21px; color:var(--text); letter-spacing:-.02em}
.brand .wiz{background:var(--wordgrad); -webkit-background-clip:text; background-clip:text; color:transparent}
.ai{display:inline-block; background:var(--grad); color:#241041; font-family:var(--disp);
  font-weight:800; font-size:11.5px; letter-spacing:.1em; padding:3px 8px 2px; border-radius:7px;
  vertical-align:middle; margin-left:7px; transform:translateY(-1px)}
.navlinks{display:flex; gap:26px; align-items:center}
.navlinks a{font-family:var(--disp); font-weight:600; font-size:15px; color:var(--text);
  text-decoration:none; opacity:.74; transition:opacity .15s}
.navlinks a:hover, .navlinks a[aria-current]{opacity:1}
@media(max-width:820px){ .navlinks{display:none} }
.btn{display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:var(--disp); font-weight:700; font-size:16px; text-decoration:none;
  padding:15px 28px; border-radius:999px; border:1.5px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease; cursor:pointer; white-space:nowrap}
.btn-primary{background:var(--grad); color:#241041; box-shadow:0 14px 34px -10px rgba(196,144,240,.5)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-sm{padding:11px 20px; font-size:14.5px}

/* ---------- motion ---------- */
html.js .reveal{opacity:0; transform:translateY(26px)}
html.js .reveal.in{opacity:1; transform:none;
  transition:opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1)}
html.js .reveal.d1.in{transition-delay:.1s} html.js .reveal.d2.in{transition-delay:.2s}
html.js .reveal.d3.in{transition-delay:.3s} html.js .reveal.d4.in{transition-delay:.4s}
.zoom{overflow:hidden}
.zoom img{display:block; width:100%; height:100%; object-fit:cover}
html.js .zoom img{opacity:0; transform:scale(1.22)}
html.js .zoom.in img{opacity:1; transform:scale(1);
  transition:opacity 1.5s ease, transform 6.5s cubic-bezier(.16,1,.3,1)}
.drift{position:absolute; inset:0}
html.js .zoom.in .drift{animation:drift 38s ease-in-out 6s infinite alternate}
@keyframes drift{from{transform:scale(1) translate3d(0,0,0)} to{transform:scale(1.09) translate3d(-1.6%,-1.2%,0)}}
@media(prefers-reduced-motion:reduce){
  html.js .reveal, html.js .zoom img{opacity:1!important; transform:none!important}
  *{animation:none!important; transition:none!important} html{scroll-behavior:auto}
}

/* ---------- magazine hero ---------- */
.maghero{position:relative; height:clamp(360px,46vw,520px); overflow:hidden}
.maghero .drift img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%}
.maghero::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(18,11,32,.55) 0%,rgba(18,11,32,.25) 40%,var(--ink) 100%)}
.maghero-in{position:absolute; inset:auto 0 0 0; z-index:2; padding:0 24px 48px; text-align:center}
.maghero h1{font-size:clamp(34px,5vw,58px); font-weight:800; text-shadow:0 4px 34px rgba(0,0,0,.7)}
.maghero h1 .grad{background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent}
.maghero p{margin:16px auto 0; max-width:56ch; color:#D6CFE4; font-size:clamp(16px,1.8vw,18.5px);
  text-shadow:0 2px 20px rgba(0,0,0,.6)}

/* ---------- the grid of pieces ---------- */
.mag{padding:64px 0 96px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:14px}
@media(max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .grid{grid-template-columns:1fr} }
.piece{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .22s ease, border-color .22s ease;
}
a.piece:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.22)}
.piece .thumb{aspect-ratio:1/1; position:relative; overflow:hidden; background:#0E0819}
.piece .thumb img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 8s cubic-bezier(.16,1,.3,1)}
a.piece:hover .thumb img{transform:scale(1.06)}
.piece .body{padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1}
.tag{
  align-self:flex-start; font-family:var(--disp); font-weight:800; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:6px;
}
.tag-article{background:rgba(155,140,255,.18); color:#C9BCFF; border:1px solid rgba(155,140,255,.3)}
.tag-event{background:rgba(240,163,60,.16); color:#F3BE78; border:1px solid rgba(240,163,60,.32)}
.piece h2{font-size:20px; font-weight:700; line-height:1.28}
.piece .meta{margin-top:auto; padding-top:10px; font-size:13.5px; color:var(--muted)}
.piece.soon{opacity:.5; cursor:default}
.piece.soon .thumb img{filter:grayscale(.5)}

/* ---------- article page ---------- */
.article{padding:56px 0 90px}
.article .wrap{max-width:720px}
.article h1{font-size:clamp(30px,4.4vw,46px); font-weight:800; margin-bottom:18px}
.byline{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:14.5px; color:var(--muted); padding-bottom:28px; border-bottom:1px solid var(--line)}
.byline b{color:var(--text); font-weight:600}
.lead{font-family:var(--disp); font-weight:600; color:var(--text);
  font-size:clamp(19px,2.2vw,23px); line-height:1.4; margin:34px 0 6px}
.article p{margin:22px 0; font-size:17.5px; line-height:1.78}
.article h2{font-size:clamp(22px,2.6vw,28px); font-weight:700; margin:52px 0 -4px}
.article h3{
  font-size:20px; font-weight:700; margin:34px 0 -6px;
  padding-left:24px; position:relative;
}
.article h3::before{
  content:''; position:absolute; left:2px; width:9px; height:9px;
  border-radius:50%; background:var(--accent);
  /* centre on the FIRST line: half the 1.18 line-height, less half the dot.
     Anchoring to the line rather than the block keeps it right if a heading wraps. */
  top:calc(.59em - 4.5px);
}
/* an h3 straight after an h2 needs real air, not the negative margin meant for a paragraph */
.article h2 + h3{margin-top:28px}
.article h2 + p, .article h3 + p{margin-top:20px}
.article figure + h2, .article blockquote + h2{margin-top:46px}
.article blockquote{
  margin:34px 0; padding:4px 0 4px 24px; border-left:3px solid var(--blossom);
  font-family:var(--disp); font-weight:600; font-size:20px; line-height:1.45; color:var(--text);
}
.article figure{margin:38px 0}
.article figure img{width:100%; border-radius:18px; display:block; border:1px solid var(--line)}
.article figcaption{margin-top:12px; font-size:14px; color:var(--muted); text-align:center}
.article .note{font-size:15px; color:var(--muted); border-top:1px solid var(--line); padding-top:22px; margin-top:44px}
.article table{
  width:100%; margin:34px 0; border-collapse:collapse;
  font-size:15.5px; line-height:1.5; text-align:left;
}
.article thead th{
  font-family:var(--disp); font-weight:700; font-size:14px; color:var(--text);
  letter-spacing:.02em; padding:0 18px 12px 0; border-bottom:1px solid rgba(255,255,255,.22);
  vertical-align:bottom;
}
.article tbody td{
  padding:13px 18px 13px 0; color:var(--body-c);
  border-bottom:1px solid var(--line); vertical-align:top;
}
.article tbody tr:last-child td{border-bottom:0}
.article tbody td:first-child{color:var(--text); font-weight:500; width:34%}
.article th:last-child, .article td:last-child{padding-right:0}
@media(max-width:620px){
  .article table{display:block; overflow-x:auto; font-size:14.5px}
  .article thead th, .article tbody td{padding-right:14px; white-space:nowrap}
  .article tbody td:first-child{width:auto}
}
.endcta{
  margin-top:52px; padding:34px; border-radius:22px; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,#2A1050,#4C1A63 52%,#7A1F52);
}
.endcta h3{font-size:22px; margin-bottom:8px}
.endcta p{margin:0 0 20px; color:rgba(255,255,255,.78); font-size:16px}
.backlink{display:inline-block; margin-bottom:26px; font-family:var(--disp); font-weight:600;
  font-size:15px; color:var(--grape); text-decoration:none}
.backlink:hover{color:var(--text)}

/* ---------- footer ---------- */
footer{background:#0B0616; border-top:1px solid var(--line); color:rgba(255,255,255,.55);
  padding:44px 0; font-size:14.5px; position:relative; z-index:1}
.foot-in{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
footer .brand span{color:#fff}
footer a{color:rgba(255,255,255,.82); text-decoration:none; margin-left:22px}
footer a:hover{color:#fff}
.foot-right{margin-left:auto}
@media(max-width:620px){ .foot-right{margin-left:0} footer a{margin:0 22px 0 0} }