/* TAKE 2 — a solar system, one planet per project */
#take2{--len:640svh}
#take2 .stage{background:radial-gradient(120% 75% at 50% 46%,#090c26 0%,#03040e 55%,#010103 100%);color:var(--color-paper)}

/* per-project colours (static posters; the live planets take theirs from take.js) */
#take2 [data-slug="galacticads"]{--g1:#8fb4ff;--g2:#3d4fe0;--g3:#6a2fd6;--g4:#0b1150;--rim:#7aa8ff}
#take2 [data-slug="sketchpad"]{--g1:#fff1dc;--g2:#f2a93b;--g3:#e8625a;--g4:#1c5f6a;--rim:#ffc9a3}
#take2 [data-slug="costello-tattoo"]{--g1:#f4f4f6;--g2:#9a9aa1;--g3:#3a3a3f;--g4:#0c0c0e;--rim:#d4d8e6}
#take2 [data-slug="suramare"]{--g1:#ffb070;--g2:#e3432a;--g3:#3a1510;--g4:#0a0605;--rim:#ff6b3d}

/* ---------------------------------------------------------------- shared */
.t2{position:relative;z-index:1}
.t2Title{margin:0;font-size:var(--type-h2);font-weight:740;font-stretch:78%;line-height:1;letter-spacing:-.01em;color:#fff}
.t2List{list-style:none;margin:0;padding:0}
.t2Work{display:flex;flex-direction:column;gap:18px;color:inherit;text-decoration:none;border-radius:16px;outline-offset:6px}
.t2Work:focus-visible{outline:2px solid var(--color-cyan)}
.t2Card{display:block;align-self:center;width:min(100%,calc(34svh * var(--ar)));aspect-ratio:var(--ar);
  border-radius:14px;overflow:hidden;background:#0c1144;
  box-shadow:0 0 0 1px rgb(255 255 255 / .10),0 28px 70px -24px rgb(0 0 0 / .9)}
.t2Card img{display:block;width:100%;height:100%;object-fit:cover}
.t2Copy{display:flex;flex-direction:column;gap:6px;text-align:start}
.t2Name{font-size:var(--type-name);font-weight:740;font-stretch:78%;line-height:1.05;color:#fff}
.t2What{font-size:var(--type-meta);font-weight:560;color:var(--color-cyan);letter-spacing:.01em}
.t2Line{font-size:var(--type-body);line-height:1.45;color:rgb(243 244 250 / .80);max-width:34ch}
.t2Work:hover .t2Name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.t2Globe{display:none}
.t2Nw{white-space:nowrap}
.t2Haze{display:none}

/* -------------------------------------------------------------- live mode */
html.jr-live #take2 .t2{position:absolute;inset:0}
html.jr-live #take2 .t2Title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
html.jr-live #take2 .t2List{position:absolute;inset:0}
html.jr-live #take2 .t2Beat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 16px calc(var(--jr-band) + 20px);opacity:0;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity}
html.jr-live #take2 .t2Copy{padding:14px 2px 0;background:radial-gradient(90% 120% at 50% 70%,rgb(1 1 3 / .55),transparent 75%)}
html.jr-live #take2 .t2Haze{display:block;position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#1a1d5e 0%,#5b6fd6 52%,#b9c9ff 100%)}
html.jr-live #take2 .t2Haze i{position:absolute;top:0;width:1px;height:38%;will-change:transform;
  background:linear-gradient(180deg,transparent,rgb(255 255 255 / .28) 55%,transparent)}
html.jr-live #take2 .t2Haze i:nth-child(1){left:13%;height:30%}
html.jr-live #take2 .t2Haze i:nth-child(2){left:34%;height:44%;opacity:.7}
html.jr-live #take2 .t2Haze i:nth-child(3){left:57%;height:26%}
html.jr-live #take2 .t2Haze i:nth-child(4){left:71%;height:40%;opacity:.6}
html.jr-live #take2 .t2Haze i:nth-child(5){left:88%;height:34%;opacity:.8}

@media (min-width:900px) and (min-aspect-ratio:1/1){
  html.jr-live #take2 .t2Beat{justify-content:center;padding:0 7vw}
  html.jr-live #take2 .t2Beat[data-side="r"]{align-items:flex-end}   /* planet right → work on the left */
  html.jr-live #take2 .t2Beat[data-side="l"]{align-items:flex-start} /* planet left → work on the right */
  html.jr-live #take2 .t2Work{width:min(38vw,600px);gap:22px}
  html.jr-live #take2 .t2Card{width:min(100%,calc(50vh * var(--ar)))}
  html.jr-live #take2 .t2Copy{background:none}
}

/* ------------------------------------------------ static mode: planet posters */
html:not(.jr-live) #take2 .stage{padding:max(88px,12svh) 16px 96px;
  background:
    radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 78% 9%,#cfe0ff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 31%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 91% 47%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 23% 63%,#cfe0ff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 67% 74%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 8% 88%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 53% 94%,#cfe0ff 50%,transparent 51%);
  background-size:260px 340px;background-color:#03040e}
html:not(.jr-live) #take2 .t2{max-width:1120px;margin:0 auto}
html:not(.jr-live) #take2 .t2List{display:grid;gap:clamp(72px,12vw,140px);margin-top:clamp(40px,8vw,88px)}
html:not(.jr-live) #take2 .t2Beat{position:relative;display:grid}
html:not(.jr-live) #take2 .t2Globe{display:block;width:min(64vw,340px);aspect-ratio:1;border-radius:50%;
  margin-inline-start:auto;margin-bottom:calc(-1 * min(18vw,96px));
  background:
    radial-gradient(circle at 34% 30%,var(--g1) 0%,var(--g2) 26%,var(--g3) 58%,var(--g4) 82%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--rim) 35%,transparent),0 0 60px -6px color-mix(in srgb,var(--rim) 55%,transparent),
    inset -28px -34px 60px rgb(0 0 0 / .65)}
html:not(.jr-live) #take2 .t2Beat[data-side="l"] .t2Globe{margin-inline-start:0;margin-inline-end:auto}
html:not(.jr-live) #take2 .t2Work{position:relative;z-index:1}
html:not(.jr-live) #take2 .t2Card{width:min(100%,calc(58svh * var(--ar)))}
html:not(.jr-live) #take2 .t2Cta{margin-block-start:clamp(64px,10vw,120px)}
@media (min-width:900px){
  html:not(.jr-live) #take2 .t2Beat{grid-template-columns:1fr 1fr;align-items:center;gap:48px}
  html:not(.jr-live) #take2 .t2Globe{margin:0 auto;width:min(32vw,380px)}
  html:not(.jr-live) #take2 .t2Beat[data-side="l"] .t2Globe{order:2;margin:0 auto}
}