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

:root{
  /* Sampled from PONZI's OWN plates, not from a broker's stylesheet.
     The previous palette was lifted off robinhood.com's computed DOM
     (their lime #CCFF00, their warm black #110E08) and it read as
     Robinhood, not as PONZI — acid green over a magenta-lit film.
     These are measured off assets-sol/brand: the coins are #d0a835,
     the prismatic key light is #f00090, the shadows are violet-blue.

     The rule: GOLD is structural (eyebrows, primary action, the footer
     slab), MAGENTA is live (every hover / interactive state), so the
     interactive layer is lit by the same colour as the film. */
  --gold:      #e0b849;   /* coins, lifted for type — 10.6:1 on --ink */
  --gold-hot:  #f0cd67;   /* hover on gold surfaces */
  --gold-deep: #a8842c;

  --magenta:   #ff3d9a;   /* the film's key light — 6.1:1 on --ink */
  --money:     #5fbf57;   /* the note green, for figures only — 8.7:1 */

  --ink:    #08070d;   /* page   — cool near-black, per the plates' violet shadow */
  --ink-2:  #0e0d16;   /* raised */
  --ink-3:  #15141f;   /* card   */

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

  --hair:   rgba(224,184,73,.13);
  --hair-2: rgba(224,184,73,.30);

  /* Three radii, no more — a document has a small vocabulary. */
  --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;   /* losses, warnings, the nil states */
}

*,*::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(--gold); color:var(--ink) }

/* visible focus everywhere — the current site has none */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--gold);
  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(--gold); 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 }
}

/* Anchor targets sit beneath a 64px fixed nav whose scrim fades to
   transparent, so a jump to #how or #changed used to land with the
   section's own heading sitting under the chrome. Sized to the nav
   plus a little air, and applied to both pages from one place. */
section[id], main[id]{ scroll-margin-top:calc(64px + 1.5rem) }