/* ══════════════════════════════════════════════════════════════
   PONZI — shared base. Brand primitives + reset only.
   Each direction owns its own type scale, layout and motion.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Sampled from robinhood.com's live computed DOM, not from a brand sheet:
     their lime is #CCFF00 and their black is WARM (R>G>B). The PONZI brief
     had a green-tinted black — warming it is what makes the parody read. */
  --lime:      #ccff00;
  --lime-hot:  #e2ff5c;
  --lime-deep: #94bd00;

  --ink:    #0a0805;   /* page   — warm near-black, per RH #110E08 */
  --ink-2:  #100d08;   /* raised */
  --ink-3:  #16120b;   /* card   */

  --bone:   #f4f2ea;   /* primary text on dark */
  --bone-2: #b8b6a8;   /* secondary — AA on --ink */
  --bone-3: #85836f;   /* tertiary / legal — never below 14px */

  --hair:   rgba(204,255,0,.13);
  --hair-2: rgba(204,255,0,.28);

  /* RH's radius vocabulary is exactly three values. Ours is too. */
  --r-pill: 36px;
  --r-card: 20px;
  --r-chip: 3px;

  --chrome: linear-gradient(180deg,#fff 0%,#dfe6ee 18%,#8a939f 40%,#4b545f 49%,
                            #fff 50.5%,#eef2f7 58%,#aeb7c2 74%,#79828e 86%,#3d4650 100%);

  --red:    #ff4d3d;   /* the only non-lime accent: losses, warnings */
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--ink); color:var(--bone); overflow-x:clip }
img,video,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:var(--lime); color:var(--ink) }

/* visible focus everywhere — the current site has none */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:2px;
}

/* pre-launch affordance: honest, not broken.
   Replaces href="#" dead links with a legible disabled state. */
[data-pending]{
  cursor:not-allowed;
  opacity:.42;
  position:relative;
}
[data-pending]::after{
  content:"soon";
  font-size:.62em; letter-spacing:.08em; text-transform:uppercase;
  margin-inline-start:.5em; opacity:.8;
}

.is-pending{ color:var(--bone-3); font-style:italic }

/* screen-reader only */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* skip link */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--lime); color:var(--ink); padding:.7rem 1.1rem; font-weight:700;
}
.skip:focus{ left:0 }

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

/* A pre-launch primary CTA stays solid — it is not an error state.
   Only its label admits that nothing can be bought yet. */
.btn-primary[data-pending]{
  opacity:1;
  background:transparent;
  border-color:var(--hair-2);
  color:var(--bone-2);
}
.btn-primary[data-pending]::after{ opacity:.9 }

/* ── cross-document view transitions ──────────────────────────────
   Makes home → art → work feel like one continuous surface rather
   than three page loads. Silently ignored where unsupported, and
   fully suppressed under reduced-motion. */
@view-transition{ navigation:auto }

::view-transition-old(root){ animation:vt-out .28s cubic-bezier(.4,0,1,1) both }
::view-transition-new(root){ animation:vt-in  .38s cubic-bezier(0,0,.2,1) both }
@keyframes vt-out{ to{ opacity:0 } }
@keyframes vt-in { from{ opacity:0 } }

/* a work's image is the shared element between index and detail */
::view-transition-group(work){ animation-duration:.5s }
::view-transition-old(work),
::view-transition-new(work){ animation:none; mix-blend-mode:normal; height:100%; overflow:clip }

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important }
}