:root {
  --bg: #0b0b0c;
  --bg2: #141416;
  --fg: #f3efe6;
  --dim: #8a877f;
  --line: #26262a;
  --y: #ffd60a;
  --hot: #ff2e88;
  --violet: #8f5bff;
  --grad: linear-gradient(90deg, var(--y), var(--hot) 55%, var(--violet));
  --display: 'Syne', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --pad: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; margin: 0; border-radius: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font: 400 16px/1.55 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--y); color: #000; }
[hidden] { display: none !important; }

h2 { font: 700 clamp(36px, 5vw, 64px)/1 var(--display); letter-spacing: -.03em; }
.label, .eyebrow { font: 500 14px/1.2 'Inter'; color: var(--dim); display: inline-flex; gap: 12px; align-items: center; }
.eyebrow { margin-bottom: 20px; }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); }
.fine { color: var(--dim); font-size: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; background: var(--y); color: #000; font: 600 15px/1 'Inter'; transition: transform .2s, background .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--hot); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.btn.wide { width: 100%; }
.btn:disabled { background: var(--line); color: var(--dim); transform: none; box-shadow: none; cursor: default; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Wet paint: a typeface with drips drawn into the glyphs. */
.wet, .hero h1 em, .quote em { font-family: 'Rubik Wet Paint', var(--display); font-weight: 400; letter-spacing: -.01em; }

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; gap: 32px; padding: 18px var(--pad); background: #0b0b0cb3; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid #ffffff0d; }
.logo { font: 800 22px/1 var(--display); letter-spacing: -.02em; display: flex; align-items: center; gap: 6px; }
.spoon { width: 9px; height: 9px; background: var(--y); transform: rotate(45deg); }
.nav nav { display: flex; gap: 28px; margin-left: auto; font-size: 14px; }
.nav nav a { color: var(--dim); transition: color .2s; position: relative; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--fg); }
.nav nav a[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--y); }
.cart-btn { font-size: 14px; display: flex; gap: 8px; align-items: center; }
.cart-btn span { min-width: 22px; height: 22px; padding: 0 6px; background: var(--fg); color: #000; display: grid; place-items: center; font: 500 11px var(--mono); }

.page { padding-top: 140px; }
.page > section { padding: 0 var(--pad); }

/* Hero */
.hero { min-height: 100svh; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: 120px var(--pad) 64px; position: relative; isolation: isolate; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(40vw 40vw at 85% 20%, #ff2e8840, transparent 70%),
  radial-gradient(35vw 35vw at 70% 75%, #6b2bff38, transparent 70%),
  radial-gradient(30vw 30vw at 15% 30%, #ffd60a22, transparent 70%);
  filter: blur(20px); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(-4vw, 3vw, 0) scale(1.08); } }
.hero-copy { position: relative; z-index: 1; }
.hero-art { align-self: stretch; margin: -120px 0 -64px; height: 100svh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); }
.hero-art .col { overflow: hidden; }
.hero-art .track { display: flex; flex-direction: column; gap: 14px; animation: up 60s linear infinite; }
.hero-art .col:nth-child(2) .track { animation-direction: reverse; animation-duration: 75s; padding-top: 14px; }
.hero-art .col:nth-child(3) .track { animation-duration: 52s; }
.hero-art:hover .track { animation-play-state: paused; }
.hero-art button { display: block; overflow: hidden; transition: transform .4s var(--ease); }
.hero-art button:hover { transform: scale(1.03); }
.hero-art img { width: 100%; height: auto; }
@keyframes up { to { transform: translateY(calc(-50% - 7px)); } }
.hero h1 { font: 800 clamp(56px, 8vw, 168px)/.86 var(--display); letter-spacing: -.045em; margin: 32px 0 72px; }
.hero h1 em { --paint: var(--grad); font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--dim); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 34ch; margin-bottom: 32px; }
.live { font-size: 14px; display: inline-flex; gap: 12px; align-items: center; padding: 11px 16px; box-shadow: inset 0 0 0 1px var(--line); background: #0b0b0c80; transition: box-shadow .2s; }
.live:hover { box-shadow: inset 0 0 0 1px var(--hot); }
.live i, .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 0 var(--hot); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } }

/* Work */
.work { padding: 96px var(--pad); }
.work-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
.chips { display: flex; border: 1px solid var(--line); }
.chips button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; font-size: 14px; line-height: 1; color: var(--dim); transition: .2s; }
.chips button:hover { color: var(--fg); }
.chips button.on { background: var(--fg); color: #000; }
.chips .n { font: 500 11px/1 var(--mono); opacity: .6; }
.grid { columns: 4 260px; column-gap: 20px; }
.card { break-inside: avoid; margin-bottom: 32px; display: block; width: 100%; text-align: left; opacity: 0; transform: translateY(16px); animation: rise .6s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.card .frame { overflow: hidden; background: var(--bg2); }
.card img { width: 100%; height: auto; transition: transform .7s var(--ease), filter .4s; }
.card:hover img { transform: scale(1.04); }
.card.sold img, .card.unavailable img { filter: saturate(.55) brightness(.8); }
.card:hover.sold img, .card:hover.unavailable img { filter: none; }
.meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 14px; }
.meta b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta span { font: 400 13px var(--mono); color: var(--dim); white-space: nowrap; }
.meta span.avail { color: var(--fg); }
.meta span.in { color: var(--y); }

/* Instagram */
.insta { padding: 120px var(--pad) 0; }
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.insta-grid.small { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ig { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg2); }
.ig img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ig:hover img { transform: scale(1.06); }
.ig.video::after { content: '▶'; position: absolute; top: 8px; right: 10px; font-size: 12px; text-shadow: 0 1px 4px #000; }

/* About */
.ab-intro { padding-bottom: 96px !important; }
.quote { font: 700 clamp(44px, 7.4vw, 128px)/.95 var(--display); letter-spacing: -.04em; max-width: 14ch; }
.quote em { --paint: var(--grad); font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 112px); align-items: center; }
.ab-split img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
figcaption { font-size: 13px; color: var(--dim); margin-top: 12px; }
.ab-copy p { color: var(--dim); font-size: 18px; max-width: 40ch; margin-top: 18px; }
.ab-copy .lead { color: var(--fg); font: 500 clamp(24px, 2.4vw, 34px)/1.25 'Inter'; letter-spacing: -.01em; margin: 0; }
.ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 140px 0; border-top: 1px solid var(--line); }
.ab-stats div { padding: 32px 0; border-bottom: 1px solid var(--line); }
.ab-stats div + div { padding-left: 32px; border-left: 1px solid var(--line); }
.ab-stats b { display: block; font: 800 clamp(56px, 8vw, 120px)/1 var(--display); letter-spacing: -.04em; }
.ab-stats span { color: var(--dim); }
.ab-stream { display: grid !important; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.stream-art { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stream-art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.stream-art img:nth-child(odd) { transform: translateY(32px); }
.stream-copy h2 { font-size: clamp(48px, 6vw, 88px); margin-bottom: 24px; }
.stream-copy p:not(.eyebrow) { color: var(--dim); font-size: 18px; margin-bottom: 32px; max-width: 32ch; }
.ab-mars { text-align: center; padding: 180px var(--pad) 140px !important; }
.ab-mars p { font: 700 clamp(32px, 4.4vw, 64px)/1.1 var(--display); letter-spacing: -.03em; margin-bottom: 40px; }

/* Commissions */
.cm-intro h1, .ct-hero h1 { font: 800 clamp(56px, 10vw, 180px)/.88 var(--display); letter-spacing: -.045em; }
.status { color: #000; background: #3cff8f; padding: 5px 10px; font-weight: 600; font-size: 13px; }
.cm-intro { display: grid !important; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.cm-intro h1 { font-size: clamp(48px, 6.6vw, 124px); }
.cm-sheet { transform: rotate(1.5deg); transition: transform .5s var(--ease); }
.cm-sheet:hover { transform: rotate(0) translateY(-4px); }
.cm-sheet img { width: 100%; box-shadow: 10px 10px 0 var(--y); }
.cm-order { margin-top: 160px; }
.cm-order h2 { margin-bottom: 48px; }
.canvas.custom .face { background: transparent; box-shadow: none; border: 2px dashed var(--dim); color: var(--fg); }
.canvas.custom:hover .face { border-color: var(--y); box-shadow: none; }
.canvas.custom.on .face { border: 0; color: #000; }
.cm-order .form { margin-top: 56px; }
.pick { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; padding: 24px 28px; border: 1px solid var(--line); transition: border-color .3s; }
.pick.set { border-color: var(--y); }
.pick.flash { animation: flash .7s var(--ease); }
@keyframes flash { from { background: color-mix(in srgb, var(--y) 22%, transparent); } }
.pick-size { font: 700 clamp(26px, 3vw, 40px)/1 var(--display); letter-spacing: -.02em; }
.pick:not(.set) .pick-size { color: var(--dim); }
.pick-price { font: 500 16px var(--mono); color: var(--dim); }
.pick.set .pick-price { color: var(--fg); }
.floor { --u: clamp(5px, 1vw, 15px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(var(--u) * 2.4) calc(var(--u) * 1.6); padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.canvas, .can { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.canvas .face { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); background: linear-gradient(135deg, #f4f0e8, #ddd7cb); box-shadow: 5px 5px 0 #0006, inset -3px -3px 0 #c9c2b4; display: grid; place-items: center; color: #1a1a1a; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.canvas .face b { font: 500 clamp(9px, .8vw, 13px) var(--mono); white-space: nowrap; }
.canvas .tag, .can .tag { font: 500 14px var(--mono); white-space: nowrap; }
.can .tag { color: var(--dim); font-family: 'Inter'; font-size: 13px; }
.canvas:hover .face { transform: translateY(-6px); box-shadow: 8px 12px 0 #0006, inset -3px -3px 0 #c9c2b4; }
.canvas.on .face { background: var(--grad); }
.can .face { width: calc(2.6 * var(--u)); height: calc(4.8 * var(--u)); background: linear-gradient(90deg, #8d8d92, #e9e9ee 35%, #a6a6ab 60%, #6e6e73); box-shadow: inset 0 calc(.35 * var(--u)) 0 #bdbdc2, inset 0 calc(-.3 * var(--u)) 0 #7b7b80; }
.cm-order .fine { margin-top: 20px; }
.cm-examples { margin: 160px 0 140px; }
.cm-examples h2 { margin-bottom: 40px; }
.cm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cm-grid img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; }
.form .full { grid-column: 1 / -1; }
.form label span { display: block; font-size: 14px; color: var(--dim); margin-bottom: 8px; }
.form input, .form select, .form textarea { width: 100%; background: var(--bg2); border: 1px solid var(--line); padding: 14px 16px; outline: none; transition: border-color .2s; resize: vertical; appearance: none; }
.form select { background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(-45deg, transparent 50%, var(--dim) 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--y); }

/* Contact */
.ct-hero { padding-bottom: 120px !important; border-bottom: 1px solid var(--line); }
.ct-mail { display: block; margin: 48px 0 28px; font: 700 clamp(28px, 5.6vw, 92px)/1 var(--display); letter-spacing: -.035em; background: linear-gradient(var(--fg), var(--fg)) 0 100% / 0 3px no-repeat; transition: background-size .5s var(--ease); width: fit-content; padding-bottom: 8px; }
.ct-mail:hover { background-size: 100% 3px; }
.ct-list { padding-bottom: 140px !important; }
.ct-list a { display: grid; grid-template-columns: 40px 1fr 1fr 24px; align-items: center; gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--line); font-size: 20px; transition: padding .35s var(--ease), color .2s; }
.ct-list a span { color: var(--dim); font: 400 15px var(--mono); }
.ct-list a i { font-style: normal; color: var(--dim); transition: transform .2s; }
.ct-list a:hover { padding-left: 12px; }
.ct-list a:hover i { color: var(--y); transform: translate(2px, -2px); }

/* Footer */
footer { padding: 64px var(--pad) 32px; border-top: 1px solid var(--line); overflow: hidden; }
.foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 40px; font-size: 14px; color: var(--dim); }
.foot-row nav { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-row a:hover { color: var(--fg); }

/* Dialogs */
dialog { border: 0; padding: 0; color: var(--fg); background: var(--bg); }
dialog::backdrop { background: #000c; backdrop-filter: blur(6px); }
.x { font-size: 28px; line-height: 1; width: 44px; height: 44px; display: grid; place-items: center; transition: background .2s; }
.x:hover { background: var(--bg2); }

.viewer[open] { margin: auto; width: min(1280px, 100vw - 2 * var(--pad)); max-width: none; max-height: calc(100svh - 48px); display: grid; grid-template-columns: 1fr 360px; overflow: hidden; animation: pop .35s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
.viewer .x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.viewer-img { background: #000; display: grid; place-items: center; min-height: 0; }
.viewer-img img { max-height: calc(100svh - 48px); width: 100%; object-fit: contain; }
.viewer aside { padding: 56px 32px 32px; display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--line); overflow-y: auto; }
.viewer h3 { font: 700 34px/1.05 var(--display); letter-spacing: -.02em; }
.viewer dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 14px; border-top: 1px solid var(--line); padding-top: 20px; }
.viewer dt { color: var(--dim); }
.note { color: var(--dim); font-size: 14px; }
.note:empty { display: none; }
.price { font: 500 28px/1 var(--mono); margin-top: auto; }
.pager { display: flex; gap: 8px; }
.pager button { flex: 1; height: 46px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.pager button:hover { box-shadow: inset 0 0 0 1px var(--fg); }

.cart[open] { inset: 0 0 0 auto; margin: 0; height: auto; max-height: none; width: min(440px, 100vw); display: flex; flex-direction: column; animation: slide .35s var(--ease); border-left: 1px solid var(--line); }
@keyframes slide { from { transform: translateX(100%); } }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.cart-head h3 { font: 700 24px var(--display); }
#cartList { list-style: none; padding: 8px 24px; flex: 1; overflow-y: auto; }
#cartList li { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
#cartList img { width: 72px; height: 72px; object-fit: cover; }
#cartList b { font-weight: 500; display: block; }
#cartList small { font: 400 13px var(--mono); color: var(--dim); }
#cartList button { font-size: 13px; color: var(--dim); }
#cartList button:hover { color: var(--hot); }
#cartList .empty { display: block; border: 0; color: var(--dim); padding: 40px 0; text-align: center; }
.cart-foot { padding: 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.total { display: flex; justify-content: space-between; font: 500 18px var(--mono); }
.err { color: var(--hot); font-size: 14px; }
.err:empty { display: none; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, calc(100% + 40px)); background: var(--fg); color: #000; padding: 14px 22px; font-weight: 500; transition: transform .4s var(--ease); z-index: 20; }
.toast.show { transform: translate(-50%, 0); }

/* /links */
body.lk { min-height: 100svh; }
/* Lava lamp: blobs drift and merge through a goo filter, then soften. */
.lk-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.lk-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 35%, #0b0b0c66, #0b0b0ce6 80%); }
.lava { --art: var(--hot); position: absolute; inset: -15%; filter: url(#lavaGoo) blur(18px) saturate(1.2); opacity: .8; }
.lava i { position: absolute; left: var(--px); top: var(--py); width: var(--s); aspect-ratio: 1; border-radius: 50%; background: var(--c); animation: lava var(--t) ease-in-out var(--d) infinite alternate; transition: background 2s; }
.lava i:nth-child(1) { --px: 8%; --py: 10%; --s: 34vmax; --c: #ffd60a; --t: 19s; --d: -3s; --dx: 18vw; --dy: 22vh; }
.lava i:nth-child(2) { --px: 55%; --py: 5%; --s: 30vmax; --c: var(--hot); --t: 23s; --d: -9s; --dx: -16vw; --dy: 26vh; }
.lava i:nth-child(3) { --px: 30%; --py: 55%; --s: 38vmax; --c: var(--violet); --t: 27s; --d: -14s; --dx: 20vw; --dy: -24vh; }
.lava i:nth-child(4) { --px: 70%; --py: 60%; --s: 26vmax; --c: #3cff8f; --t: 21s; --d: -6s; --dx: -22vw; --dy: -18vh; }
.lava i:nth-child(5) { --px: 0%; --py: 70%; --s: 24vmax; --c: #2ec5ff; --t: 25s; --d: -11s; --dx: 26vw; --dy: -30vh; }
.lava i:nth-child(6) { --px: 45%; --py: 30%; --s: 22vmax; --c: var(--art); --t: 17s; --d: -2s; --dx: -12vw; --dy: 20vh; }
.lava i:nth-child(7) { --px: 80%; --py: 20%; --s: 16vmax; --c: #ff6a1a; --t: 15s; --d: -7s; --dx: -30vw; --dy: 34vh; }
@keyframes lava {
  0% { transform: translate(0, 0) scale(1, 1); }
  50% { transform: translate(var(--dx), var(--dy)) scale(1.15, .85); }
  100% { transform: translate(calc(var(--dx) * -.5), calc(var(--dy) * 1.3)) scale(.9, 1.15); }
}
.lk-col { width: min(520px, 100%); margin: 0 auto; padding: 56px 16px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lk-face { position: relative; width: 104px; height: 104px; padding: 3px; background: var(--grad); animation: hue 8s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.lk-face img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; opacity: 0; transition: opacity .8s; background: var(--bg); }
.lk-face img.on { opacity: 1; }
.lk-name { font: 400 68px/1 'Rubik Wet Paint', var(--display); margin-top: 22px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lk-sub { color: var(--dim); margin-top: 18px; }
.lk-tag { margin-top: 4px; font-size: 16px; }
.lk-social { display: flex; gap: 4px; margin: 22px 0 28px; }
.lk-social a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--fg); opacity: .8; transition: .2s; }
.lk-social a:hover { opacity: 1; background: #ffffff14; }
.lk-feature, .lk-list a { display: grid; align-items: center; text-align: left; width: 100%; background: #16161acc; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #ffffff12; transition: transform .25s var(--ease), border-color .25s, background .25s, box-shadow .25s; }
.lk-feature:hover, .lk-list a:hover { transform: translate(-2px, -2px); border-color: #ffffff30; background: #1c1c21dd; box-shadow: 4px 4px 0 var(--tint, var(--y)); }
.go { color: var(--dim); font-size: 18px; transition: color .2s, transform .2s; }
a:hover > .go { color: var(--fg); transform: translate(2px, -2px); }
.lk-feature { grid-template-columns: 112px 1fr auto; gap: 18px; padding: 16px 20px 16px 16px; border-color: #ffd60a40; }
.lk-feature b { display: block; font: 700 22px/1.15 var(--display); margin-bottom: 6px; }
.lk-feature small { font-size: 13px; color: var(--dim); }
.fan { position: relative; height: 92px; }
.fan img { position: absolute; top: 6px; left: 22px; width: 62px; height: 80px; object-fit: cover; box-shadow: 0 8px 20px #0008; transition: transform .4s var(--ease); }
.fan img:nth-child(1) { transform: rotate(-14deg) translateX(-18px); }
.fan img:nth-child(3) { transform: rotate(12deg) translateX(18px); }
.lk-feature:hover .fan img:nth-child(1) { transform: rotate(-20deg) translateX(-26px); }
.lk-feature:hover .fan img:nth-child(3) { transform: rotate(18deg) translateX(26px); }
.lk-list { list-style: none; padding: 0; width: 100%; display: grid; gap: 10px; margin-top: 10px; }
.lk-list a { grid-template-columns: 44px 1fr auto; gap: 14px; padding: 12px 20px 12px 12px; }
.lk-list .ico { width: 44px; height: 44px; display: grid; place-items: center; color: var(--tint); background: color-mix(in srgb, var(--tint) 16%, transparent); }
.lk-list b { display: block; font-weight: 600; }
.lk-list small { font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.lk-block { width: 100%; margin-top: 40px; text-align: left; }
.lk-head { display: flex; justify-content: space-between; margin-bottom: 14px; }
.lk-head a:hover { color: var(--fg); }
.lk-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; margin: 0 -16px; padding-inline: 16px; }
.lk-rail a { flex: 0 0 148px; scroll-snap-align: start; }
.lk-rail img { width: 148px; height: 184px; object-fit: cover; transition: transform .4s var(--ease); }
.lk-rail a:hover img { transform: translateY(-3px); }
.lk-rail b { display: block; font-weight: 500; font-size: 13px; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-rail small { font: 400 12px var(--mono); color: var(--dim); }
.lk-foot { margin-top: 40px; font-size: 12px; color: var(--dim); }
.lk-foot:hover { color: var(--y); }

/* Personality */
@view-transition { navigation: auto; }
.nav { view-transition-name: nav; }
::view-transition-old(root) { animation: .25s var(--ease) both vt-out; }
::view-transition-new(root) { animation: .45s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* Her handle is yellowspoongirl, so the cursor is a yellow spoon. */
body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M13 13L28 28' stroke='%23000' stroke-width='5' stroke-linecap='square'/%3E%3Cpath d='M13 13L28 28' stroke='%23f3efe6' stroke-width='2.5' stroke-linecap='square'/%3E%3Cellipse cx='9' cy='9' rx='5.5' ry='7.5' transform='rotate(-45 9 9)' fill='%23f3efe6' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 3 3, auto; }
a, button, label, select, .card, [data-id] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M13 13L28 28' stroke='%23000' stroke-width='5' stroke-linecap='square'/%3E%3Cpath d='M13 13L28 28' stroke='%23ffd60a' stroke-width='2.5' stroke-linecap='square'/%3E%3Cellipse cx='9' cy='9' rx='5.5' ry='7.5' transform='rotate(-45 9 9)' fill='%23ffd60a' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 3 3, pointer; }
input, textarea { cursor: text; }

:focus-visible { outline: 2px solid var(--y); outline-offset: 3px; }

/* Film grain so the dark reads like a surface, not a screen. */
body::after { content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.splat { position: fixed; z-index: 90; width: 80px; height: 120px; margin: -40px 0 0 -40px; pointer-events: none; filter: url(#goo6); }
.splat i, .splat b { position: absolute; background: var(--c); border-radius: 50%; transform: translate(-50%, -50%) scale(0); animation: splat 1.5s var(--ease) forwards; }
.splat b { width: 5px; height: 26px; border-radius: 0 0 9px 9px; top: 44px; transform-origin: top; animation: splat-drip 1.5s cubic-bezier(.5, 0, .7, 1) forwards; }
@keyframes splat { 15% { transform: translate(-50%, -50%) scale(1.15); } 30%, 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.9); opacity: 0; } }
@keyframes splat-drip { 0%, 20% { transform: translateX(-50%) scaleY(0); } 70% { transform: translateX(-50%) scaleY(1); opacity: 1; } 100% { transform: translateX(-50%) scaleY(1.2) translateY(20%); opacity: 0; } }

/* Gallery cards lift off the wall with a hard offset, like a print on a pin. */
.card .frame { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover .frame { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--y); }
.card.sold:hover .frame, .card.unavailable:hover .frame { box-shadow: 8px 8px 0 var(--line); }

/* Viewer takes on the painting's color. */
.viewer { --art: var(--y); transition: box-shadow .6s; }
.viewer[open] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--art) 40%, transparent), 0 30px 160px -20px color-mix(in srgb, var(--art) 55%, transparent); }
.viewer::backdrop { background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--art) 40%, #000c), #000e); }
.viewer .price { color: color-mix(in srgb, var(--art) 35%, var(--fg)); }

#cartCount.bump { animation: bump .5s var(--ease); }
@keyframes bump { 30% { transform: scale(1.5) rotate(-8deg); background: var(--y); } }

/* The footer wordmark fills with paint on hover. */
footer .big { display: block; width: 100%; height: auto; }
footer .big text { font: 800 390px var(--display); }
footer .big .paint { transform: scaleX(0); transition: transform 1.2s var(--ease); }
footer .big:hover .paint { transform: scaleX(1); }

/* Things rise into place as they scroll in. */
@supports (animation-timeline: view()) {
  .ab-split > *, .ab-stats > div, .stream-art img, .stream-copy, .cm-grid img, .canvas, .can, .ct-list a, .ab-mars, .insta-grid > * {
    animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
  }
  @keyframes reveal { from { opacity: 0; translate: 0 40px; } }
}

@media (max-width: 860px) {
  .nav { flex-wrap: wrap; row-gap: 12px; }
  .nav nav { order: 3; width: 100%; margin: 0; justify-content: space-between; }
  .cart-btn { margin-left: auto; }
  .page { padding-top: 150px; }
  .hero { grid-template-columns: 1fr; padding-top: 150px; }
  .hero-art { position: absolute; inset: 0; margin: 0; height: auto; opacity: .3; gap: 8px; }
  .ab-split, .ab-stream { grid-template-columns: 1fr; }
  .ab-stats { grid-template-columns: 1fr; margin: 96px 0; }
  .ab-stats div + div { padding-left: 0; border-left: 0; }
  .cm-grid { grid-template-columns: 1fr 1fr; }
  .cm-intro { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .ct-list a { grid-template-columns: 32px 1fr 24px; }
  .ct-list a span { display: none; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .viewer[open] { grid-template-columns: 1fr; overflow-y: auto; width: 100vw; max-height: 100svh; height: 100svh; }
  .viewer-img img { max-height: 60svh; }
  .viewer aside { border-left: 0; padding: 24px var(--pad) 32px; }
  .grid { columns: 2 150px; column-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .card { opacity: 1; transform: none; } }