/* ============ Variant B · The STEM Issue (editorial) ============ */
:root {
  --paper: #f4f1f8;
  --paper-2: #ebe6f2;
  --ink: #0f0a17;
  --ink-2: #1a1325;
  --muted: #6c6280;
  --muted-ink: #a99cbd;
  --violet: #5000ff;
  --magenta: #ff00c8;
  --grad: linear-gradient(90deg, #5000ff, #a000f0 50%, #ff00c8);
  --line: rgba(15, 10, 23, .14);
  --gutter: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --sans: "Poppins", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 4px; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.mono { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.yr { font: inherit; }

.kicker { display: flex; gap: 14px; align-items: center; margin: 0 0 22px; color: var(--muted); }
.kicker span:first-child { color: var(--violet); }
.kicker span + span::before { content: "—"; margin-right: 14px; color: var(--muted); }
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 36px; max-width: 15ch; text-wrap: balance; }
.display em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }

/* ============ Cover ============ */
.cover { min-height: 100svh; padding: 18px var(--gutter) 22px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 14px; border-bottom: 2px solid var(--ink); position: relative; z-index: 5; }
.masthead__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
.masthead__brand img { width: 26px; filter: brightness(0); }
.masthead__issue { text-align: center; }
.masthead__place { text-align: right; color: var(--muted); }
.cover__stage { position: relative; flex: 1; min-height: 560px; }
.cover__title { position: absolute; inset: 2% 0 auto; margin: 0; font-family: var(--serif); font-weight: 400; line-height: .8; text-align: center; letter-spacing: -.035em; }
.cover__w1 { display: block; font-size: clamp(3rem, 9vw, 9rem); font-style: italic; color: var(--violet); }
.cover__w2 { display: block; font-size: clamp(5rem, 21vw, 22rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .04em .06em; }
.cover__people { position: absolute; left: 50%; bottom: 0; height: 72%; width: auto; max-width: none; translate: -50% 0; z-index: 2; filter: drop-shadow(0 30px 40px rgba(80, 0, 255, .25)); }
.cover__not { position: absolute; right: 0; bottom: 6%; z-index: 3; margin: 0; font-size: clamp(2rem, 5.4vw, 5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cover__not em { font-weight: 400; color: var(--muted); margin-right: .1em; }
.coverlines { position: absolute; z-index: 3; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; width: min(240px, 22vw); }
.coverlines--l { left: 0; bottom: 14%; }
.coverlines--r { right: 0; top: 46%; text-align: right; }
.coverlines li { font-size: .95rem; line-height: 1.35; border-top: 1px solid var(--ink); padding-top: 10px; }
.coverlines .mono { display: block; color: var(--magenta); margin-bottom: 4px; }
.coverlines b { display: block; font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1; }
.cover__open { align-self: center; margin-top: 14px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 999px; transition: background .3s, color .3s; position: relative; z-index: 5; }
.cover__open:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 860px) {
  .masthead { grid-template-columns: 1fr auto; }
  .masthead__issue { display: none; }
  .cover__stage { min-height: 0; display: flex; flex-direction: column; }
  .cover__title { position: relative; inset: auto; margin-top: 18px; }
  .cover__w2 { font-size: 23vw; }
  .cover__people { position: relative; left: auto; translate: none; width: min(100%, 560px); height: auto; margin: -10vw auto 0; }
  .cover__not { position: relative; right: auto; bottom: auto; text-align: center; margin-top: -2vw; font-size: 11vw; }
  .coverlines { position: static; width: 100%; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; text-align: left !important; }
  .coverlines--r { margin-top: 14px; }
  .coverlines b { font-size: 1.5rem; }
}

/* ============ Ticker ============ */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; padding: 12px 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.ticker__track { display: flex; width: max-content; animation: tick 50s linear infinite; }
.ticker__track span { white-space: nowrap; padding-right: 1em; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ============ Stacked pages ============ */
.pages { position: relative; }
.page { position: sticky; top: 0; min-height: 100svh; overflow: hidden; }
.page__inner { min-height: 100svh; padding: clamp(80px, 9vw, 120px) var(--gutter); transform-origin: 50% 0; will-change: transform; }
.page--paper .page__inner { background: var(--paper); }
.page--ink .page__inner { background: var(--ink); color: var(--paper); }
.page--ink .kicker { color: var(--muted-ink); }
.page--ink .kicker span:first-child { color: var(--magenta); }
.page--grad .page__inner { background: var(--grad); color: #fff; }
.page--grad .kicker, .page--grad .kicker span:first-child { color: rgba(255,255,255,.8); }
.page--grad .display em { background: none; color: #fff; }
.page + .page .page__inner { border-radius: 28px 28px 0 0; box-shadow: 0 -30px 60px -20px rgba(15, 10, 23, .35); }

/* Chapter 1 */
.p1 { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 5vw, 80px); align-items: center; }
.p1__num { display: flex; align-items: flex-start; line-height: .78; }
.serif-num { font-family: var(--serif); font-size: clamp(9rem, 30vw, 28rem); letter-spacing: -.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; padding-right: .04em; }
.p1__pct { font-family: var(--serif); font-size: clamp(4rem, 10vw, 9rem); margin-top: .1em; color: var(--violet); }
.lead { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.05; margin: 0 0 18px; letter-spacing: -.01em; }
.lead em { color: var(--magenta); }
.body { color: var(--muted); font-size: 1.1rem; max-width: 42ch; margin: 0 0 34px; }
.p1__clips { position: relative; height: 230px; }
.p1__clips img { position: absolute; width: 62%; border: 1px solid var(--line); box-shadow: 0 20px 40px -18px rgba(15,10,23,.35); transition: transform .6s var(--ease), z-index 0s; background: #fff; }
.p1__clips img:nth-child(1) { left: 0; top: 0; rotate: -4deg; }
.p1__clips img:nth-child(2) { left: 22%; top: 40px; rotate: 3deg; }
.p1__clips img:nth-child(3) { left: 40%; top: 90px; rotate: -2deg; }
.p1__clips img:hover { transform: scale(1.12) translateY(-10px); z-index: 4; }
@media (max-width: 860px) { .p1 { grid-template-columns: 1fr; } .p1__clips { height: 210px; } }

/* Chapter 2: lenses */
.page--ink .display { color: var(--paper); }
.lenses { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2.4vw, 32px); }
.lens { margin: 0; }
.lens__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; --x: 50%; --y: 40%; --r: 0px; }
.lens__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lens__b { clip-path: circle(var(--r) at var(--x) var(--y)); }
.lens__frame::after { content: ""; position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2); translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); pointer-events: none; }
.lens figcaption { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); margin-top: 12px; }
.lens figcaption b { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1; }
.lens figcaption .mono { color: var(--muted-ink); align-self: center; }
.p2__but { font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 3rem); margin: 44px 0 0; line-height: 1.1; }
.p2__hint { display: block; font-family: var(--mono); color: var(--muted-ink); margin-top: 10px; font-size: .72rem; }
@media (max-width: 760px) {
  .lenses { grid-template-columns: 1fr 1fr; }
  .lens:last-child { grid-column: span 2; }
  .lens:last-child .lens__frame { aspect-ratio: 16 / 10; }
  .p2__hint::after { content: " (tap)"; }
}

/* Chapter 3 */
.p3 { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 5vw, 70px); align-items: center; }
.pull { margin: 0; font-size: clamp(1.3rem, 2.3vw, 2rem); font-weight: 300; line-height: 1.3; border-left: 3px solid #fff; padding-left: 22px; max-width: 30ch; }
.pull em { font-size: 1.2em; }
.p3__phones { position: relative; height: clamp(420px, 48vw, 620px); }
.ph { position: absolute; width: 50%; margin: 0; }
.ph img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; border-radius: 28px; border: 6px solid var(--ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.ph figcaption { margin-top: 10px; text-align: center; }
.ph--a { left: 2%; top: 0; rotate: -5deg; }
.ph--b { right: 2%; top: 8%; rotate: 4deg; }
@media (max-width: 860px) { .p3 { grid-template-columns: 1fr; } .p3__phones { height: 112vw; max-height: 560px; } }

/* Chapter 4: ledger */
.ledger { border-top: 2px solid var(--ink); }
.ledger__head, .row { display: grid; grid-template-columns: 1fr 1.3fr .8fr; gap: 20px; align-items: baseline; }
.ledger__head { padding: 12px 0; color: var(--muted); border-bottom: 1px solid var(--line); }
.row { padding: 18px 0; border-bottom: 1px solid var(--line); position: relative; transition: padding .4s var(--ease), color .3s; isolation: isolate; }
.row::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--ease); z-index: -1; }
.row:hover { color: var(--paper); padding-left: 18px; }
.row:hover::before { transform: scaleY(1); }
.row__brand { font-size: .95rem; font-weight: 500; }
.row__res { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.01em; }
.row:hover .row__res { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.row__time { color: var(--muted); text-align: right; }
.row:hover .row__time { color: var(--muted-ink); }
.ledger__hint { color: var(--muted); margin-top: 16px; }
@media (max-width: 760px) {
  .ledger__head { display: none; }
  .row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .row__brand { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
  .ledger__hint { display: none; }
}

/* Chapter 5 */
.p5__title { font-size: clamp(2.2rem, 5.6vw, 5.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; margin: 0 0 60px; max-width: 18ch; }
.p5__c { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; font-size: 1.1em; }
.p5__s { position: relative; color: var(--muted-ink); }
.p5__s::after { content: ""; position: absolute; left: -2%; right: -2%; top: 55%; height: .09em; background: var(--magenta); transform: scaleX(var(--s, 0)); transform-origin: 0 50%; }
.p5__quote { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); border-top: 1px solid rgba(255,255,255,.2); padding-top: 30px; }
.p5__quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.15; }
.p5__quote figcaption { display: grid; gap: 14px; align-content: start; }
.p5__quote .tr { color: var(--muted-ink); font-size: 1.05rem; }
.p5__quote .mono { color: var(--magenta); }
@media (max-width: 760px) { .p5__quote { grid-template-columns: 1fr; } }

/* ============ Shared section ============ */
section.index, section.gather, section.editorial, section.contrib, section.back { padding: clamp(90px, 12vw, 160px) var(--gutter); position: relative; background: var(--paper); }
.sec-head { margin-bottom: 30px; }

/* Index accordion */
.acc { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn { width: 100%; display: grid; grid-template-columns: 60px 1fr 40px; align-items: center; gap: 16px; padding: 22px 0; position: relative; }
.acc__no { color: var(--violet); }
.acc__t { font-family: var(--serif); font-size: clamp(1.7rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -.015em; transition: transform .5s var(--ease); }
.acc__btn:hover .acc__t, .acc__btn[aria-expanded="true"] .acc__t { transform: translateX(14px); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc__plus { width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 50%; position: relative; justify-self: end; transition: background .3s, transform .5s var(--ease); }
.acc__plus::before, .acc__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; translate: -50% -50%; }
.acc__plus::after { rotate: 90deg; transition: rotate .4s var(--ease); }
.acc__btn[aria-expanded="true"] .acc__plus { background: var(--ink); color: var(--paper); transform: rotate(180deg); }
.acc__btn[aria-expanded="true"] .acc__plus::after { rotate: 0deg; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.acc__panel > p { overflow: hidden; margin: 0; padding-left: 76px; max-width: 70ch; color: var(--muted); font-size: 1.1rem; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__item.is-open .acc__panel > p { padding-bottom: 26px; }
@media (max-width: 600px) { .acc__btn { grid-template-columns: 34px 1fr 32px; } .acc__panel > p { padding-left: 50px; } }

/* Gallery */
.gather { background: var(--paper-2) !important; }
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 2vw, 24px); }
.g { margin: 0; position: relative; }
.g img { width: 100%; height: 100%; object-fit: cover; transition: filter .6s, transform .9s var(--ease); }
.g > div, .g { overflow: visible; }
.g figcaption { margin-top: 8px; color: var(--muted); }
.g--1 { grid-column: 1 / 8; aspect-ratio: 3 / 2; }
.g--2 { grid-column: 8 / 13; aspect-ratio: 4 / 5; margin-top: 18%; }
.g--3 { grid-column: 2 / 7; aspect-ratio: 4 / 3; margin-top: -10%; }
.g--4 { grid-column: 7 / 13; aspect-ratio: 3 / 2; }
.g img { aspect-ratio: inherit; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } .g { grid-column: auto !important; margin-top: 0 !important; } }

/* Case files */
section.cases { padding: clamp(90px, 12vw, 160px) var(--gutter); background: var(--paper); }
.case { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 5vw, 80px); align-items: center; padding: 40px 0; border-top: 2px solid var(--ink); }
.case--flip .case__media { order: 2; }
.case__media { position: relative; border-radius: 6px; overflow: visible; }
.case__media--tlab { background: radial-gradient(70% 70% at 50% 60%, #eef7f5, #cfe7e1); aspect-ratio: 5 / 4; display: grid; place-items: center; }
.case__product { width: 78%; max-height: 92%; object-fit: contain; mix-blend-mode: multiply; }
.case__clip { position: absolute; right: -14px; bottom: -22px; width: 44%; margin: 0; background: #fff; padding: 6px 6px 8px; rotate: 4deg; box-shadow: 0 24px 40px -18px rgba(15,10,23,.5); transition: rotate .6s var(--ease), scale .6s var(--ease); }
.case__clip:hover { rotate: 0deg; scale: 1.4; z-index: 2; }
.case__clip figcaption { color: var(--muted); margin-top: 6px; font-size: .62rem; }
.case__media--aph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.case__no { color: var(--violet); margin: 0 0 12px; }
.case__name { font-size: clamp(2.2rem, 4.4vw, 4rem); font-weight: 800; letter-spacing: -.045em; line-height: .98; margin: 0 0 16px; }
.case__name em { display: block; font-size: .62em; letter-spacing: -.01em; color: var(--magenta); }
.case__text { color: var(--muted); font-size: 1.1rem; max-width: 50ch; margin: 0 0 24px; }
.case__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 24px; border-top: 1px solid var(--line); }
.case__facts div { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); }
.case__facts dt { font-family: var(--serif); font-size: 2.2rem; line-height: 1; }
.case__facts dd { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
.case__facts--list { grid-template-columns: 1fr; }
.case__facts--list dt { font-family: var(--sans); font-size: 1.15rem; font-weight: 700; }
.case__quote { margin: 0; font-family: var(--serif); font-size: 1.4rem; line-height: 1.3; }
.case__quote cite { display: block; color: var(--muted); margin-top: 8px; font-style: normal; }
.next { margin-top: 60px; border-top: 2px solid var(--ink); padding-top: 24px; }
.next__label { color: var(--magenta); margin: 0 0 18px; }
.next__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3vw, 40px); }
.next__list li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px dashed var(--line); }
.next__list .mono { color: var(--violet); }
.next__list b { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; }
.next__list em { color: var(--muted); font-family: var(--sans); font-style: normal; font-size: .95rem; }
.next__list .pipe__visual { margin: 6px 0 10px; border-radius: 4px; }
.next__list .pouch { max-width: 58%; }
@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; }
  .case--flip .case__media { order: 0; }
  .case__facts { grid-template-columns: 1fr 1fr; }
  .case__facts--list { grid-template-columns: 1fr; }
  .next__list { grid-template-columns: 1fr; }
  .case__clip { right: 0; }
}

/* Editorial */
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); border-top: 2px solid var(--ink); }
.dropcap { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.2; margin: 0; }
.dropcap::first-letter { float: left; font-size: 4.4em; line-height: .78; padding: .06em .08em 0 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 760px) { .editorial { grid-template-columns: 1fr; } }

/* Contributors */
.people { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.person { border-bottom: 1px solid var(--line); }
.person__btn { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; padding: 22px 0; }
.person__name { font-size: clamp(2.2rem, 7vw, 6.4rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; text-transform: uppercase; transition: color .3s, letter-spacing .6s var(--ease); }
.person__btn:hover .person__name { color: transparent; -webkit-text-stroke: 1.5px var(--ink); letter-spacing: -.03em; }
.person__role { color: var(--violet); }
.person__bio { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.person__bio > * { overflow: hidden; }
.person__bio { grid-template-columns: 1fr; }
.person__bio > img { display: none; }
.person__bio p { margin: 0; color: var(--muted); max-width: 70ch; font-size: 1.05rem; }
.person.is-open .person__bio { grid-template-rows: 1fr; }
.person.is-open .person__bio p { padding-bottom: 28px; }
@media (hover: none) {
  .person.is-open .person__bio { grid-template-columns: 110px 1fr; gap: 16px; }
  .person.is-open .person__bio > img { display: block; width: 110px; aspect-ratio: 3/4; object-fit: cover; margin-bottom: 28px; }
}

/* Back cover */
.back { background: var(--grad) !important; color: #fff; overflow: hidden; padding-bottom: 80px !important; }
.back__title { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 10vw, 10rem); line-height: .9; letter-spacing: -.03em; margin: 0 0 40px; max-width: 12ch; }
.back__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: end; }
.back__team { width: 100%; filter: drop-shadow(0 30px 40px rgba(15,10,23,.35)); }
.back__info { margin: 0; display: grid; gap: 4px; padding-bottom: 30px; }
.back__info div { display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.35); }
.back__info dt { opacity: .75; padding-top: 6px; }
.back__info dd { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.45rem); overflow-wrap: anywhere; }
.back__info a { background: linear-gradient(#fff, #fff) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.back__info a:hover { background-size: 100% 1px; }
.back__colophon { opacity: .75; margin: 30px 0 0; }
@media (max-width: 860px) { .back__grid { grid-template-columns: 1fr; } .back__team { order: 2; } }

/* Floating preview */
.float { position: fixed; top: 0; left: 0; width: 240px; pointer-events: none; z-index: 60; opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .3s, width .3s; }
.float img { width: 100%; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(15,10,23,.6); }
.float.is-wide { width: 380px; }
.float.is-on { opacity: 1; }
@media (hover: none) { .float { display: none; } }

/* Variant switcher */
.variants { position: fixed; left: 16px; bottom: 16px; z-index: 70; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(15,10,23,.85); backdrop-filter: blur(10px); }
.variants a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #cfc4df; transition: background .3s, color .3s; }
.variants a:hover { color: #fff; }
.variants a[aria-current] { background: var(--grad); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .page { position: relative; }
}