:root{
  --bg:#060608;
  --ink:#eceae4;
  --dim:#8a8a93;
  --ink2:#d7d5cf;              /* secondary text */
  --panel:#0c0c0f;            /* tile / card surface */
  --line:255,255,255;         /* hairline / border rgb (flips per theme) */
  --bg-rgb:6,6,8;             /* bg rgb for translucent overlays */
  --accent:#63c7d6;            /* cool steel-cyan — authorial, not the generic AI amber; replaced live by a colour sampled from the current painting */
  --mx:50%; --my:44%;
  --reveal:44vmax;             /* spotlight radius — large, so the colour stays alive */
}
/* ── light theme ── */
html.light{
  --bg:#f3f0e8; --ink:#1b1a20; --dim:#6c6a74; --ink2:#3b3a43;
  --panel:#ece8de; --line:26,22,30; --bg-rgb:243,240,232;
  --accent:#137e8d;            /* deeper teal so links/buttons keep contrast on the bone background */
}
html.light #vignette{ background:radial-gradient(135% 125% at 50% 44%, transparent 60%, rgba(120,108,88,.08) 88%, rgba(92,80,62,.15) 100%); }
html.light #grain{ opacity:.04; mix-blend-mode:multiply; }

/* ── controls: language + theme (bottom-right, blends on any background) ── */
#cj-controls{position:fixed; bottom:16px; right:18px; z-index:40; display:flex; align-items:center; gap:14px;
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.14em; mix-blend-mode:difference; color:#fff}
#cj-social{position:fixed; bottom:16px; left:18px; z-index:40; display:flex; align-items:center; gap:13px;
  mix-blend-mode:difference; color:#fff}
#cj-social a{display:inline-flex; color:inherit; opacity:.5; transition:opacity .2s}
#cj-social a:hover{opacity:1}
#cj-social svg{width:15px; height:15px; display:block}
@media(max-width:560px){ #cj-social{bottom:12px; left:12px; gap:11px} }
#cj-lang{display:flex; gap:9px}
#cj-controls button{background:none; border:none; color:inherit; cursor:pointer; font:inherit; letter-spacing:inherit; padding:2px 1px; opacity:.5; transition:opacity .2s}
#cj-controls button:hover{opacity:.9}
#cj-lang button.on{opacity:1; border-bottom:1px solid currentColor}
#cj-controls #cj-theme{display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px; padding:0; margin-left:6px;
  border:1px solid currentColor; border-radius:50%; opacity:.85; transition:opacity .2s ease, transform .2s ease, background .2s ease}
#cj-controls #cj-theme:hover{opacity:1; transform:scale(1.08)}
#cj-controls #cj-theme svg{display:block}
@media(max-width:560px){ #cj-controls{bottom:12px; right:12px; gap:10px; font-size:10px} }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  overflow:hidden; position:fixed; inset:0;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
a{color:inherit; text-decoration:none}

/* ── home: a lit canvas on a dark wall + the archive's info ── */
#home{position:fixed; inset:0; display:grid; grid-template-columns:40% 60%; align-items:center}
#intro{padding:0 3vw 0 5vw; display:flex; flex-direction:column; justify-content:center; gap:22px; z-index:5}
.brand-xl{font-weight:700; letter-spacing:.14em; font-size:clamp(30px,4.2vw,58px); line-height:1; color:var(--ink); position:relative}
.tagline{font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-size:clamp(15px,1.35vw,20px); line-height:1.6; color:var(--ink2); max-width:32ch}
#stats{font-size:11px; letter-spacing:.13em}
#enter{display:flex; flex-direction:column; margin-top:14px}
#enter a{position:relative; display:flex; align-items:baseline; gap:12px; padding:12px 0; font-size:13px; letter-spacing:.14em;
  color:var(--dim); border-top:1px solid rgba(var(--line),.07); transition:color .25s, padding-left .25s}
#enter a:last-child{border-bottom:1px solid rgba(var(--line),.07)}
#enter a em{font-style:normal; font-size:10.5px; color:#5b6478; letter-spacing:.08em}
#enter a:hover{color:var(--ink); padding-left:8px}
#enter a:hover em{color:var(--accent)}

#canvas{position:relative; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4vh 2vw}
/* triptych: the current work centred and dominant, previous/next faded + smaller, peeking from the edges */
.triptych{position:relative; width:100%; max-width:62vw; height:72vh; display:flex; align-items:center; justify-content:center}
.frame{position:relative; width:100%; max-width:36vw; height:100%; z-index:2; will-change:transform; cursor:pointer}
.frame::before{content:""; position:absolute; inset:-16%; z-index:-1; opacity:.22; filter:blur(34px); transition:background 1s ease;
  background:radial-gradient(circle at 50% 46%, var(--accent), transparent 62%)}
.art{position:absolute; inset:0; background-position:center; background-size:contain; background-repeat:no-repeat; opacity:0;
  will-change:opacity, transform; transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.6)) saturate(1.06)}
.side{position:absolute; top:50%; transform:translateY(-50%) scale(.9); width:22vw; height:58%; z-index:1; cursor:pointer;
  background-position:center; background-size:contain; background-repeat:no-repeat; opacity:.24;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.5)) saturate(.92) brightness(.92);
  transition:opacity 1.2s ease, transform .55s ease, filter .55s ease}
.side.prev{left:0}
.side.next{right:0}
.side:hover, .side:focus-visible{opacity:.62; transform:translateY(-50%) scale(.96); filter:drop-shadow(0 18px 38px rgba(0,0,0,.55)) saturate(1) brightness(1); outline:none}
.caption{margin-top:22px; display:flex; gap:16px; align-items:baseline; justify-content:center; flex-wrap:wrap;
  font-size:11px; letter-spacing:.14em; color:var(--dim); max-width:70vw; text-align:center}
.caption #cap{color:var(--ink2); font-family:"Newsreader",serif; font-style:italic; font-size:15px; letter-spacing:0}
.caption #idx{color:var(--ink)}

@media (max-width:900px){
  #home{grid-template-columns:1fr; grid-template-rows:auto auto; align-items:start; position:absolute; min-height:100vh; overflow-y:auto}
  #intro{padding:86px 22px 6px; gap:15px}
  .tagline{max-width:40ch}
  #canvas{height:auto; min-height:64vh; padding:10px 16px 48px}
  .triptych{max-width:96vw; height:58vh}
  .frame{max-width:74vw}
  .side{width:15vw; height:44%; opacity:.18}
  .side.prev{left:-3vw}
  .side.next{right:-3vw}
  .caption{max-width:92vw}
}

/* ── atmosphere ── */
#vignette{position:fixed; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(135% 125% at 50% 44%, transparent 58%, rgba(0,0,0,.38) 86%, rgba(0,0,0,.72) 100%);}
#grain{position:fixed; inset:-50%; pointer-events:none; z-index:4; opacity:.06;
  background-repeat:repeat; image-rendering:pixelated; mix-blend-mode:overlay;
  animation:grain 1.1s steps(3) infinite;}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)} 80%{transform:translate(4%,4%)} 100%{transform:translate(0,0)} }

/* ── chrome (terminal UI) ── */
#top{position:fixed; top:0; left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:space-between;
  padding:20px 26px; font-size:13px; letter-spacing:.14em; mix-blend-mode:difference;}
.brand{font-weight:700; letter-spacing:.26em}
#nav{display:flex; gap:22px; font-size:12px; letter-spacing:.14em; color:var(--dim)}
#nav a{position:relative; transition:color .2s}
#nav a:hover, .brand:hover{color:var(--ink)}

#meta{position:fixed; bottom:0; left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:space-between;
  padding:18px 26px; font-size:11px; letter-spacing:.2em; color:var(--dim); mix-blend-mode:difference;}
#idx{color:var(--ink)}
.blink{animation:blink 2.4s steps(1) infinite}
@keyframes blink{0%,70%{opacity:.75}71%,100%{opacity:.18}}

/* ── boot overlay ── */
#boot{position:fixed; inset:0; z-index:20; background:var(--bg); display:flex; align-items:center; justify-content:center;
  transition:opacity 1s ease; }
#boot.gone{opacity:0; pointer-events:none}
.reboot #boot{display:none}   /* returning to home within a session: no loading screen, go straight in */
#bootlines{font-size:14px; line-height:1.9; letter-spacing:.06em; color:var(--ink); white-space:pre; padding:0 18px;}
#bootlines::after{content:"_"; color:var(--accent); animation:blink 1s steps(1) infinite}

/* ── interior pages (gallery / lore) ── */
body.page{position:relative; overflow-y:auto; cursor:auto}
#top.solid{mix-blend-mode:normal; background:linear-gradient(180deg, rgba(var(--bg-rgb),.95), rgba(var(--bg-rgb),0)); backdrop-filter:blur(2px)}
.mono-dim{color:var(--dim); font-size:12px; letter-spacing:.16em}
/* minimal header → the works dominate (less text, more image) */
#head{padding:78px 26px 8px; text-align:center}
#head h1{font-size:11.5px; font-weight:700; letter-spacing:.42em; color:var(--ink); opacity:.78}
#head p{margin-top:6px; font-size:9.5px; opacity:.55}

/* centered rows → full rows fill the width, and a partial/leftover row is centered (more elegant than left-packed masonry) */
#grid{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:16px; padding:10px 26px 80px; max-width:1500px; margin:0 auto}
#grid .tile{width:calc(25% - 12px)}
@media (max-width:1200px){ #grid .tile{width:calc(33.333% - 11px)} }
@media (max-width:820px){ #grid{gap:14px; padding:10px 14px 60px} #grid .tile{width:calc(50% - 7px)} }
@media (max-width:460px){ #grid .tile{width:min(360px,100%)} }
.tile{margin:0; position:relative; cursor:pointer; overflow:hidden; border-radius:3px;
  background:var(--panel); outline:1px solid rgba(var(--line),.05); outline-offset:-1px;}
.tile img{display:block; width:100%; height:auto; filter:saturate(1.04) blur(16px);
  transform:scale(1.07) translateY(20px); opacity:0; will-change:opacity, transform, filter;
  transition:opacity 1s ease, transform 1.15s cubic-bezier(.2,.7,.2,1), filter 1.15s ease;}
.tile img.in{opacity:1; transform:scale(1) translateY(0); filter:saturate(1.04) blur(0)}
.tile:hover img{filter:saturate(1.16) brightness(1.05) blur(0); transform:scale(1.04)}
.tile-vid{display:block; width:100%; height:auto; border-radius:3px; background:#111317}
.tile-playover{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; color:#fff; font-size:30px; opacity:.85; text-shadow:0 2px 8px rgba(0,0,0,.6); pointer-events:none}
.tile::after{content:attr(data-i); position:absolute; left:10px; bottom:9px; font-size:10px; letter-spacing:.18em;
  color:var(--ink); opacity:0; transition:opacity .4s; text-shadow:0 1px 6px #000; z-index:2}
.tile:hover::after{opacity:.85}
.tile::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(120% 100% at 50% 120%, var(--accent), transparent 55%); mix-blend-mode:soft-light}
.tile:hover::before{opacity:.5}

/* tools */
#tools{max-width:860px; margin:0 auto; padding:16px 26px 100px; display:flex; flex-direction:column; gap:14px}
.tool{display:flex; align-items:center; gap:20px; padding:22px 24px; border:1px solid rgba(var(--line),.08); border-radius:4px;
  background:rgba(var(--line),.015); transition:border-color .3s, background .3s, transform .3s}
.tool:hover{border-color:var(--accent); background:rgba(var(--line),.05); transform:translateX(4px)}
.tool .t-i{font-size:12px; color:var(--dim); letter-spacing:.1em; flex:none}
.tool .t-b{flex:1; display:flex; flex-direction:column; gap:6px}
.tool .t-n{font-weight:700; letter-spacing:.2em; font-size:15px; color:var(--ink)}
.tool .t-d{font-size:12.5px; color:var(--dim); letter-spacing:.02em; line-height:1.5}
.tool .t-go{font-size:12px; color:var(--accent); letter-spacing:.14em; flex:none; opacity:.6; transition:opacity .3s}
.tool:hover .t-go{opacity:1}
@media (max-width:560px){ .tool{gap:12px; padding:16px} .tool .t-go{display:none} }

/* lore */
#lore{max-width:1000px; margin:0 auto; padding:140px 26px 120px}
#lore h1{text-align:center; font-size:15px; font-weight:700; letter-spacing:.4em; color:var(--ink); margin-bottom:54px}
/* the artist — a single restrained portrait, B&W + grain, text wraps around it (gaze into the page). Colour returns on hover. */
.bio-portrait{float:left; width:min(236px,46%); margin:4px 32px 32px 0;
  opacity:0; transform:translateY(20px); transition:opacity 1s ease, transform 1.15s cubic-bezier(.2,.7,.2,1)}
.bio-portrait.in{opacity:1; transform:none}
.bio-portrait img{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:3px;
  outline:1px solid rgba(var(--line),.09); outline-offset:-1px;
  filter:grayscale(1) contrast(1.06) saturate(1) brightness(.94); transition:filter 2.6s cubic-bezier(.45,.05,.55,.95)}
.bio-portrait:hover img{filter:grayscale(0) contrast(1.02) saturate(1.04) brightness(1)}
.bio-portrait figcaption{margin-top:9px; font-family:"Space Mono",monospace; font-size:9px; letter-spacing:.2em; color:var(--dim)}
/* portrait platform links — grouped with the photo under a thin rule, monochrome to match, accent on hover */
.bio-links{margin-top:13px; padding-top:13px; border-top:1px solid rgba(var(--line),.12); display:flex; align-items:center; gap:18px}
.bio-links .bl-ic{color:var(--ink2); display:inline-flex; align-items:center; line-height:0; transition:color .25s ease, transform .25s ease}
.bio-links .bl-ic:hover{color:var(--accent); transform:translateY(-2px)}
.bio-links svg{display:block; width:auto}
.bio-links .bl-os{height:18px}
.bio-links .bl-tl{height:13px}
@media(max-width:560px){ .bio-portrait{float:none; width:min(220px,72%); margin:0 auto 22px} .bio-portrait figcaption{text-align:center} }
#body{min-height:40vh; columns:2; column-gap:58px}   /* magazine 2-col: the bio fills the page width while each column stays a readable measure */
#body .bio-sec{break-inside:avoid; break-after:avoid; -webkit-column-break-after:avoid}   /* keep each section header glued to its paragraph */
#body p{break-inside:avoid}                                                                /* never split a paragraph across the two columns */
@media(max-width:720px){ #body{columns:1; column-gap:0; min-height:auto} }
#body p{font-family:"Newsreader", Georgia, serif; font-size:19px; line-height:1.85; color:var(--ink2); margin:0 0 26px;
  opacity:0; transform:translateY(20px); filter:blur(8px);
  transition:opacity 1s ease, transform 1.15s cubic-bezier(.2,.7,.2,1), filter 1.15s ease}
#body p.in{opacity:1; transform:none; filter:blur(0)}
#body p:first-of-type::first-letter{font-size:2.6em; line-height:.8; float:left; margin:6px 10px 0 0; color:var(--accent); font-family:"Space Mono",monospace}
/* lead hook: the one-line summary skimmers read first */
.bio-lead{font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-size:23px; line-height:1.6; color:var(--ink); margin:0 0 42px; padding-left:17px; border-left:2px solid var(--accent);
  opacity:0; transform:translateY(20px); filter:blur(8px); transition:opacity 1s ease, transform 1.15s cubic-bezier(.2,.7,.2,1), filter 1.15s ease}
.bio-lead.in{opacity:1; transform:none; filter:blur(0)}
/* section markers that give the long bio rhythm (terminal-style) */
.bio-sec{font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.28em; color:var(--accent); margin:44px 0 16px; clear:both;
  opacity:0; transform:translateY(12px); transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1)}
.bio-sec.in{opacity:1; transform:none}
.bio-sec:first-of-type{margin-top:4px}
@media(max-width:560px){ .bio-lead{font-size:19px} }
/* Lore head: portrait + artist statement side by side (clean 2-col, no float/overlap) */
.bio-head{ display:flex; gap:34px; align-items:flex-start; margin:0 0 50px }
.bio-head .bio-portrait{ float:none; margin:0; width:min(236px,42%); flex:0 0 auto }
.lore-stmt{ flex:1; min-width:0; padding-top:4px }
.lore-stmt .ls-label{ display:block; font-family:"Space Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.26em; color:var(--accent); margin-bottom:13px }
.lore-stmt .ls-text{ font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-style:italic; font-size:clamp(16px,1.6vw,19px); line-height:1.52; color:var(--ink) }
@media(max-width:560px){ .bio-head{ flex-direction:column; align-items:center; gap:20px } .bio-head .bio-portrait{ width:min(220px,72%) } .lore-stmt{ text-align:center; padding-top:0 } .lore-stmt .ls-text{ font-size:17px } }
.lore-foot{margin-top:70px; text-align:center; font-size:11px; letter-spacing:.28em; color:var(--dim)}

/* transmissions — interview testimonials as featured pull-quotes, OpenSea emphasised */
#transmissions{max-width:1000px; margin:62px auto 0; padding:0 26px}
#transmissions > h2{font-size:12px; letter-spacing:.3em; color:var(--accent)}
#transmissions > .mono-dim{margin:6px 0 24px}
#xmit{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch}   /* quotes side by side so the proof + field recordings below aren't buried */
.xmit{margin:0; position:relative; display:flex; flex-direction:column; padding:24px 28px; border:1px solid rgba(var(--line),.08);
  border-left:2px solid rgba(var(--line),.14); border-radius:5px; overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--line),.022), rgba(var(--line),0));
  opacity:0; transform:translateY(18px); filter:blur(8px);
  transition:opacity .9s ease, transform 1.05s cubic-bezier(.2,.7,.2,1), filter 1.05s ease, border-color .5s ease}
.xmit.in{opacity:1; transform:none; filter:blur(0)}
.xmit.featured{border-left:3px solid var(--accent); padding:30px 32px;
  background:linear-gradient(180deg, rgba(var(--line),.03), rgba(var(--line),0))}
.xmit:hover{border-color:rgba(var(--line),.16)}
.xmit.featured:hover{border-left-color:var(--accent)}
.xmit-src{font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.24em; color:var(--dim); margin-bottom:13px}
.xmit.featured .xmit-src{color:var(--accent)}
.xmit blockquote{margin:0; flex:1; font-family:"Newsreader",Georgia,serif; font-style:italic; color:var(--ink2); line-height:1.5; font-size:20px}
.xmit.featured blockquote{font-size:22px; color:var(--ink2)}
.xmit-mark{color:var(--accent); font-style:normal; margin-right:1px}
.xmit-link{display:inline-block; margin-top:17px; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.13em;
  color:var(--accent); text-decoration:none; transition:letter-spacing .3s ease, text-shadow .3s ease}
.xmit-link:hover{letter-spacing:.18em; text-shadow:0 0 14px var(--accent)}
@media(max-width:760px){ #xmit{grid-template-columns:1fr} }
@media(max-width:560px){ #transmissions{padding:0 16px} .xmit blockquote{font-size:18px} .xmit.featured blockquote{font-size:21px} }

/* exhibitions + field recordings — loose on the page, compact: a year-matrix + a cinematic photo strip. No internal scroll. */
/* break out of the narrow reading column so the year-matrix sits in ONE short row */
#record{position:relative; left:50%; transform:translateX(-50%); width:min(1180px, 94vw); max-width:none; margin:58px 0 0; padding:0}
.rec-col{margin-bottom:46px}
.rec-col > h2{font-size:12px; letter-spacing:.3em; color:var(--accent)}
.rec-col > .mono-dim{margin:6px 0 20px}

/* exhibitions as a horizontal matrix of year-columns — short, scannable, reads at a glance, never a long list */
#exlog{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:flex-start}
.exyear{flex:1 1 150px; min-width:140px; max-width:230px;
  opacity:0; transform:translateY(18px); filter:blur(6px); transition:opacity .9s ease, transform 1.05s cubic-bezier(.2,.7,.2,1), filter 1.05s ease}
.exyear.in{opacity:1; transform:none; filter:blur(0)}
.exyear .yr{font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--ink);
  border-bottom:1px solid rgba(var(--line),.13); padding-bottom:6px; margin-bottom:9px; display:flex; justify-content:space-between; align-items:baseline}
.exyear .yr span{color:var(--dim); font-size:9px; font-weight:400; letter-spacing:.16em}
.exitem{display:flex; flex-direction:column; gap:1px; padding:5px 0; border-bottom:1px solid rgba(var(--line),.04)}
.exitem .city{color:var(--accent); font-size:10.5px; letter-spacing:.04em}
.exitem .ev{color:var(--ink2); font-size:10.5px; line-height:1.32}
/* events with a linked recording: a discreet inline marker (clean list, aligned rows), preview on hover, open on click */
.exitem.has-media:hover .city{color:var(--ink)}
.exmk{display:inline-flex; vertical-align:-2px; margin-left:5px; color:var(--accent); opacity:.55; transition:opacity .2s ease, transform .2s ease}
.exmk svg{display:block}
.exitem.has-media:hover .exmk{opacity:1; transform:translateY(-1px)}
#expreview{position:fixed; z-index:40; width:200px; pointer-events:none; opacity:0; transform:translateY(6px) scale(.98);
  transition:opacity .22s ease, transform .22s ease; filter:drop-shadow(0 18px 42px rgba(0,0,0,.6))}
#expreview.on{opacity:1; transform:translateY(0) scale(1)}
#expreview .exp-inner{position:relative; width:200px; height:200px; border-radius:6px; background:#111317 center center/cover no-repeat; overflow:hidden;
  outline:1px solid rgba(var(--line),.16); display:flex; align-items:center; justify-content:center}
#expreview .exp-inner video{width:100%; height:100%; object-fit:cover; display:block}
#expreview .exp-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:38px; opacity:.9; pointer-events:none}

/* field recordings — a justified gallery: photos keep their real proportions, packed into full-width rows (JS sizes each tile) */
#photos{display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 8px; align-items:flex-start}
.photo{position:relative; flex:0 0 auto; width:200px; height:150px; margin:0; cursor:pointer; overflow:hidden; border-radius:4px;
  background:#111317; outline:1px solid transparent; transition:outline-color .25s ease}   /* width/height overwritten by JS */
.photo:hover{outline-color:var(--accent)}
.photo .ph-img, .photo .pv-media{width:100%; height:100%; object-fit:cover; display:block}
.photo .ph-img{opacity:0; transition:opacity .9s ease; filter:saturate(1.05)}
.photo .ph-img.in{opacity:1}
.photo .ph-cap{position:absolute; left:0; right:0; bottom:0; padding:18px 10px 8px; font-size:9.5px; letter-spacing:.02em; line-height:1.32;
  color:#eceae4; background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.25) 55%, transparent);
  opacity:0; transform:translateY(5px); transition:opacity .25s ease, transform .25s ease; pointer-events:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.photo:hover .ph-cap{opacity:1; transform:translateY(0)}
.photo.ph-hidden{display:none}
.photos-more{display:block; margin:20px auto 0; background:none; border:1px solid rgba(var(--line),.18); color:var(--dim);
  font-family:"Space Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; padding:11px 22px; border-radius:4px; cursor:pointer;
  transition:color .25s ease, border-color .25s ease}
.photos-more:hover{color:var(--accent); border-color:var(--accent)}
.photo-vid{position:relative}
.photo-vid .pv-box{position:absolute; inset:0; background:#111317; display:flex; align-items:center; justify-content:center}
.photo-vid .pv-play{color:var(--accent); font-size:30px; opacity:.85}
.photo-vid .pv-over{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none}
#lbArt video{max-width:100%; max-height:100%; display:block; margin:auto; border-radius:3px; outline:1px solid rgba(var(--line),.1)}
.lb-cap{position:fixed; bottom:52px; left:0; right:0; text-align:center; font-size:13px; color:var(--ink2); letter-spacing:.02em; padding:0 24px; max-width:720px; margin:0 auto}
@media(max-width:820px){ #record{margin:44px 0 0; padding:0 16px} }
@media(max-width:560px){ .exyear{max-width:none; flex-basis:44%} }

/* lightbox */
#lightbox{position:fixed; inset:0; z-index:30; background:rgba(var(--bg-rgb),.96); display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .35s ease; backdrop-filter:blur(6px)}
#lightbox.hidden{opacity:0; pointer-events:none}
/* stage: the gallery-label info panel beside the artwork */
.lb-stage{display:flex; align-items:center; justify-content:center; gap:clamp(24px,4vw,56px); width:min(94vw,1260px); height:86vh}
.lb-art{flex:1 1 auto; min-width:0; height:100%; background-position:center; background-size:contain; background-repeat:no-repeat;
  filter:drop-shadow(0 30px 80px rgba(0,0,0,.7)); opacity:1;
  transition:opacity .42s ease, transform .55s cubic-bezier(.2,.7,.2,1)}
.lb-info{flex:0 0 clamp(190px,21vw,270px); align-self:center; text-align:left}
.lb-info .lb-idx{font-size:10px; letter-spacing:.2em; color:var(--dim); margin-bottom:18px}
.lb-title{font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-style:italic; font-size:clamp(20px,1.8vw,26px); line-height:1.22; color:var(--ink); margin:0 0 16px}
.lb-title:empty{display:none}
.lb-nav{position:fixed; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--ink); opacity:.5;
  font-size:40px; cursor:pointer; padding:20px; transition:opacity .2s; font-family:inherit}
.lb-nav:hover{opacity:1; color:var(--accent)}
.lb-prev{left:6px} .lb-next{right:6px}
.lb-close{position:fixed; top:18px; right:22px; background:none; border:none; color:var(--ink); opacity:.6; font-size:20px; cursor:pointer}
.lb-close:hover{opacity:1; color:var(--accent)}
/* artwork spec: year / medium / surface / dimensions — each on its own line, like a gallery label */
.lb-spec{font-size:11px; letter-spacing:.04em; color:var(--ink2); line-height:1.75}
.lb-spec:empty{display:none}
.lb-spec .lb-specline{white-space:normal}
.lb-spec .lb-edition{margin-top:7px; font-family:"Space Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.lb-spec .lb-prov{display:inline-block; margin-top:8px; font-family:"Space Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.lb-status-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:11px; font-family:"Space Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase}
.lb-status{display:inline-flex; align-items:center; gap:7px; color:var(--dim)}
.lb-status::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--dim); flex:none}
.lb-st-available::before,.lb-st-edition::before{background:var(--accent)}
.lb-st-unreleased::before{background:transparent; box-shadow:inset 0 0 0 1.5px var(--dim)}
.lb-st-enquire::before{background:transparent; box-shadow:inset 0 0 0 1.5px var(--accent)}
.lb-sep{color:var(--dim); opacity:.45}
.lb-collect{color:var(--accent); text-decoration:none; opacity:.9; border-bottom:1px solid transparent; transition:opacity .2s, border-color .2s}
.lb-collect:hover{opacity:1; border-bottom-color:currentColor}
.lb-onchain{margin-top:10px; font-family:"Space Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); line-height:1.5}
.lb-onchain .oc-v{color:var(--accent)}
.lb-onchain a{color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s}
.lb-onchain a:hover{border-bottom-color:currentColor}
.lb-onchain:empty{display:none}
.lb-about{margin:16px 0 4px}
.lb-about .lb-about-l{display:block; font-family:"Space Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:9px}
.lb-about .lb-about-t{display:block; font-family:"Newsreader",Georgia,serif; font-size:14.5px; line-height:1.62; color:var(--ink2)}
.lb-collection{margin-top:14px; font-family:"Space Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.lb-collection .lb-coll-l{color:var(--accent); opacity:.75}
/* safety: the gallery label never overflows the stage; if a description is unusually long it scrolls with NO visible bar (short texts never trigger it) */
.lb-info{max-height:86vh; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none}
.lb-info::-webkit-scrollbar{width:0; height:0; display:none}
.lb-shows{margin-top:16px; font-size:10.5px; letter-spacing:.03em; color:var(--dim); line-height:1.6}
.lb-shows:empty{display:none}
.lb-shows .lbs-label{display:block; color:var(--dim); text-transform:uppercase; letter-spacing:.16em; font-size:9px; margin-bottom:5px}
.lb-shows .lbs-item{display:block; color:var(--ink2); text-decoration:none; border-bottom:1px solid transparent; width:fit-content; transition:color .2s ease, border-color .2s ease}
.lb-shows .lbs-item:hover{color:var(--accent); border-bottom-color:var(--accent)}
.lb-shows .lbs-yr{color:var(--dim); opacity:.75}
.lb-shows .lbs-loc{color:var(--dim); opacity:.85}
.lb-shows .lbs-dot{color:var(--dim); opacity:.4}
.lb-shows .lbs-item.has-media{position:relative}
.lb-shows .lbs-item.has-media::before{content:'◉'; color:var(--accent); opacity:.55; font-size:7px; margin-right:5px; vertical-align:middle}
.lb-shows .lbs-item.lbs-plain{cursor:default; border-bottom:none}
.lb-shows .lbs-item.lbs-plain:hover{color:var(--ink2); border-bottom:none}

/* event-record viewer (opens the photo/video attached to the exhibition where the work was shown) */
#evmedia{position:fixed; inset:0; z-index:50; background:rgba(5,5,8,.93); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:44px 24px}
#evmedia.hidden{display:none}
#evmedia .evm-stage{max-width:92vw; max-height:82vh; display:flex; align-items:center; justify-content:center}
#evmedia .evm-stage img, #evmedia .evm-stage video{max-width:92vw; max-height:82vh; display:block; border-radius:4px; outline:1px solid rgba(var(--line),.12)}
#evmedia .evm-cap{margin-top:16px; font-size:11px; letter-spacing:.14em; color:var(--dim); text-align:center; max-width:70vw}
#evmedia .evm-close{position:fixed; top:16px; right:20px; background:none; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; opacity:.75}
#evmedia .evm-close:hover{opacity:1; color:var(--accent)}
#evmedia .evm-nav{position:fixed; top:50%; transform:translateY(-50%); background:none; border:none; color:#fff; opacity:.5; font-size:38px; cursor:pointer; padding:18px}
#evmedia .evm-nav:hover{opacity:1; color:var(--accent)}
#evmedia .evm-prev{left:6px} #evmedia .evm-next{right:6px}

@media (max-width:820px){
  .lb-stage{flex-direction:column; gap:16px; height:86vh; width:94vw}
  .lb-art{width:100%; flex:1 1 auto; min-height:0}
  .lb-info{flex:none; width:100%; max-width:520px; text-align:center}
  .lb-info .lb-idx{margin-bottom:8px}
  .lb-title{margin-bottom:8px; font-size:18px}
  .lb-shows .lbs-item, .lb-shows .lbs-label{width:auto}
  .lb-shows{margin-top:10px}
}
@media (max-width:640px){
  #nav{gap:14px; font-size:11px}
  #top{padding:16px 16px; font-size:11px}
  #meta{padding:14px 16px}
  :root{--reveal:40vmax}
  .lb-nav{font-size:30px; padding:10px}
}
@media (prefers-reduced-motion: reduce){
  #grain{animation:none}
  .art{transition:opacity 1.5s ease}
}

/* ── contact ── */
#contact{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:118px 24px 96px}
#contact h1{font-size:15px; font-weight:700; letter-spacing:.4em; color:var(--ink); margin-bottom:16px}
#contact > .mono-dim{max-width:42ch; margin-bottom:34px; line-height:1.6}
.contact-form{width:100%; max-width:540px; display:flex; flex-direction:column; gap:12px}
.contact-form .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.contact-form .row2{display:flex; gap:12px}
.contact-form .row2 > *{flex:1; min-width:0}
.contact-form input, .contact-form textarea{width:100%; background:rgba(var(--line),.03); color:var(--ink);
  border:1px solid rgba(var(--line),.12); border-radius:4px; padding:13px 15px; font-family:"Space Mono",ui-monospace,monospace;
  font-size:13px; letter-spacing:.02em; transition:border-color .25s, background .25s; resize:vertical}
.contact-form textarea{min-height:130px; line-height:1.55}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:var(--dim)}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--accent); background:rgba(var(--line),.05)}
.contact-send{margin-top:4px; background:var(--accent); color:#0a0a0d; border:none; border-radius:4px; cursor:pointer;
  font-family:"Space Mono",monospace; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:14px 20px;
  transition:filter .25s, transform .25s, opacity .25s}
.contact-send:hover{filter:brightness(1.08)}
.contact-send:active{transform:translateY(1px)}
.contact-send:disabled{opacity:.55; cursor:default}
.form-status{min-height:18px; margin-top:4px; font-size:11px; letter-spacing:.08em; color:var(--dim)}
.form-status.ok{color:var(--accent)}
.form-status.err{color:#d98b7a}
.contact-alt{margin-top:30px; font-size:11px; letter-spacing:.1em}
.contact-alt a{color:var(--accent)}
.contact-alt a:hover{text-decoration:underline; text-underline-offset:3px}
.contact-social{margin-top:30px; display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px}
.contact-social .cs-label{font-size:10px; letter-spacing:.28em; color:var(--dim)}
.cs-link{display:inline-flex; align-items:center; gap:8px; color:var(--ink2,var(--ink)); font-size:12px; letter-spacing:.06em;
  padding:7px 13px; border:1px solid rgba(var(--line),.14); border-radius:999px; transition:border-color .22s, color .22s, background .22s}
.cs-link svg{opacity:.9; transition:opacity .22s}
.cs-link:hover{color:var(--accent); border-color:var(--accent); background:rgba(var(--line),.04)}
.cs-link:hover svg{opacity:1}
.contact-foot{margin-top:40px; font-size:10px; letter-spacing:.28em; color:var(--dim)}
@media(max-width:520px){ .contact-form .row2{flex-direction:column} #contact{padding:100px 20px 80px} }

/* ── PROOF OF WORK (concept) ── */
#pow{max-width:1180px; margin:0 auto; padding:90px 26px 96px}
#pow .pow-block:first-of-type{margin-top:0}
.pow-intro{text-align:center; max-width:720px; margin:0 auto 64px}
.pow-intro h1{font-size:clamp(16px,2.1vw,22px); letter-spacing:.38em; color:var(--ink); font-weight:700}
.pow-manifesto{font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-style:italic; font-size:clamp(17px,1.6vw,23px); line-height:1.6; color:var(--ink2); margin:22px 0 14px}
.pow-sub{font-size:10.5px; letter-spacing:.2em; color:var(--accent)}
.pow-block{margin-top:58px}
.pow-h2{font-size:12px; letter-spacing:.3em; color:var(--accent); margin-bottom:22px}
.pow-dim{font-size:11px; letter-spacing:.14em; color:var(--dim); margin:7px 0 24px}
/* the making grid */
.pow-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:22px}
.pow-card{border:1px solid rgba(var(--line),.1); border-radius:6px; overflow:hidden; background:rgba(var(--line),.015);
  opacity:0; transform:scale(1.04) translateY(18px); filter:blur(14px); will-change:opacity,transform,filter;
  transition:opacity 1s ease, transform 1.15s cubic-bezier(.2,.7,.2,1), filter 1.15s ease, border-color .3s}
.pow-card.in{opacity:1; transform:none; filter:blur(0)}
.pow-card:hover{border-color:rgba(var(--line),.22)}
.pow-media{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--panel)}
.pow-art{position:absolute; inset:0; background-size:cover; background-position:center top; filter:saturate(1.05);
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pow-card:hover .pow-art{transform:scale(1.04)}
.pow-scan{display:none}
@keyframes powscan{from{top:40%}to{top:-2%}}
.pow-play{position:absolute; left:10px; bottom:10px; z-index:2; font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:rgba(var(--bg-rgb),.5); backdrop-filter:blur(3px); padding:4px 9px; border-radius:3px}
.pow-meta{padding:13px 15px 16px}
.pow-title{font-size:12px; letter-spacing:.05em; color:var(--ink)}
.pow-stats{font-size:10px; letter-spacing:.08em; color:var(--dim); margin-top:5px}
.pow-badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.pow-badges span{font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(var(--line),.16); padding:3px 8px; border-radius:20px}
/* creation certificate */
.pow-cert{max-width:600px; border:1px solid rgba(var(--line),.16); border-top:2px solid var(--accent); border-radius:6px;
  padding:26px 28px; background:rgba(var(--line),.02); font-family:"Space Mono",ui-monospace,monospace}
.pow-cert h3{font-size:11px; letter-spacing:.26em; color:var(--accent); margin-bottom:18px}
.pow-cert dl{display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:11px; margin:0}
.pow-cert dt{color:var(--dim); letter-spacing:.1em}
.pow-cert dd{color:var(--ink2); text-align:right; margin:0; word-break:break-all}
.pow-certfoot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:20px;
  border-top:1px solid rgba(var(--line),.1); padding-top:16px}
.pow-cert .verify{font-size:10.5px; letter-spacing:.14em; color:var(--accent); border:1px solid rgba(var(--line),.22); padding:8px 14px; border-radius:3px; transition:border-color .3s}
.pow-cert .verify:hover{border-color:var(--accent)}
.pow-cert .status{font-size:10.5px; letter-spacing:.18em; color:var(--accent)}
.pow-note{text-align:center; font-size:10px; letter-spacing:.18em; color:var(--dim); margin-top:56px; opacity:.7}
@media(max-width:560px){ #pow{padding:76px 16px 60px} .pow-cert dd{word-break:break-all} }

/* ── PROOF OF WORK · modal (cinematic detail: media left, certificate right) ── */
#powModal{position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:44px 26px; overflow-y:auto;
  opacity:0; transition:opacity .4s ease}
#powModal.hidden{display:none}
#powModal.show{opacity:1}
.pm-bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; filter:blur(55px) saturate(1.25) brightness(.42); transform:scale(1.2)}
#powModal::after{content:""; position:absolute; inset:0; z-index:0; background:rgba(var(--bg-rgb),.82); backdrop-filter:blur(2px)}
.pm-close{position:fixed; top:18px; right:22px; z-index:4; background:none; border:none; color:var(--ink); font-size:22px; cursor:pointer; opacity:.75}
.pm-close:hover{color:var(--accent); opacity:1}
.pm-body{position:relative; z-index:2; width:100%; max-width:1060px; margin:auto;
  transform:translateY(16px) scale(.99); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#powModal.show .pm-body{transform:none}
.pm-grid{display:grid; grid-template-columns:1.22fr .88fr; gap:46px; align-items:center}
.pm-media{min-width:0; display:flex; justify-content:center}
.pm-video{position:relative; width:100%; aspect-ratio:16/9; border-radius:7px; overflow:hidden; background:#000; box-shadow:0 34px 90px rgba(0,0,0,.6)}
.pm-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.pm-artimg{display:block; max-width:100%; max-height:80vh; border-radius:5px; box-shadow:0 34px 90px rgba(0,0,0,.6); filter:saturate(1.05)}
.pm-info{min-width:0}
.pm-title{font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-style:italic; font-size:clamp(22px,2.5vw,34px); line-height:1.18; color:var(--ink); margin-bottom:8px}
.pm-kicker{font-size:10px; letter-spacing:.26em; color:var(--accent); margin-bottom:22px}
.pm-certy{font-family:"Space Mono",ui-monospace,monospace}
.pm-certy dl{display:grid; grid-template-columns:auto 1fr; gap:11px 18px; margin:0}
.pm-certy dt{color:var(--dim); letter-spacing:.09em; font-size:9.5px; align-self:center}
.pm-certy dd{color:var(--ink2); text-align:right; margin:0; font-size:12px; word-break:break-all; align-self:center}
.pm-certy dd.big{color:var(--ink); font-size:15px; font-weight:700; letter-spacing:.02em}
.pm-status{margin-top:22px; padding-top:16px; border-top:1px solid rgba(var(--line),.14); font-size:11px; letter-spacing:.2em; color:var(--accent)}
.pm-verify{display:inline-block; margin-top:14px; font-size:10.5px; letter-spacing:.14em; color:var(--accent); border:1px solid rgba(var(--line),.22); border-radius:3px; padding:8px 14px; text-decoration:none}
.pm-verify:hover{border-color:var(--accent)}
@media(max-width:820px){ #powModal{padding:64px 18px 40px; align-items:flex-start}
  .pm-grid{grid-template-columns:1fr; gap:26px} .pm-artimg{max-height:56vh} }

/* ── STUDIO grid ── */
.studio-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px; align-items:start}
.studio-item{margin:0}
.studio-item .pm-video{box-shadow:none; border:1px solid rgba(var(--line),.08)}
/* videos play inline: side by side in the grid (≈4 per row), compact and all in one identical frame */
.studio-vid .tl{box-shadow:none; aspect-ratio:4/5; outline:1px solid rgba(var(--line),.08)}
.studio-vid .tl-vid{width:100%; height:100%; max-height:none; object-fit:contain; background:#000}
.studio-vid .pm-video{aspect-ratio:4/5}
.studio-cap, .studio-photo figcaption{font-size:10.5px; color:var(--dim); letter-spacing:.03em; line-height:1.45; margin-top:9px}
.studio-photo{overflow:hidden}
.studio-photo img{display:block; width:100%; border-radius:5px; outline:1px solid rgba(var(--line),.08); filter:saturate(1.04)}

/* ── page transitions (smooth crossfade between pages) ── */
#pagefx{position:fixed; inset:0; z-index:70; background:var(--bg); opacity:0; pointer-events:none; animation:pfxIn .6s ease}
@keyframes pfxIn{ from{opacity:1} to{opacity:0} }
html.cj-leaving #pagefx{animation:none; opacity:1; pointer-events:all; transition:opacity .4s ease}
@media (prefers-reduced-motion: reduce){ #pagefx{display:none} }

/* ── Artifacts lightbox → subtle "proof of work" link (only when the work has one) ── */
.lb-proof{display:inline-block; margin-top:8px; text-decoration:none;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  transition:color .25s ease, letter-spacing .25s ease}
.lb-proof[hidden]{display:none}
.lb-proof:hover{color:var(--accent); letter-spacing:.24em}

/* ── mobile header polish: keep the brand on one line; let the nav wrap neatly ── */
@media (max-width:600px){
  #top{flex-wrap:wrap; gap:8px 12px; padding:12px 14px}
  .brand{white-space:nowrap; font-size:12px; letter-spacing:.13em}
  #nav{gap:10px 13px; font-size:10px; flex-wrap:wrap; justify-content:flex-end}
}

/* ── clean self-hosted time-lapse player (no logos · custom play/pause + slow-motion) ── */
.tl{position:relative; width:100%; border-radius:7px; overflow:hidden; background:#000; box-shadow:0 34px 90px rgba(0,0,0,.6)}
.tl-vid{display:block; width:100%; max-height:74vh; background:#000; cursor:pointer}
.tl-big{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.4); color:#fff; font-size:20px; cursor:pointer; backdrop-filter:blur(4px); transition:opacity .25s, transform .25s}
.tl-big:hover{transform:translate(-50%,-50%) scale(1.06)}
.tl.playing .tl-big{opacity:0; pointer-events:none}
.tl-ctrl{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:13px; padding:14px 15px;
  background:linear-gradient(0deg, rgba(0,0,0,.65), transparent); opacity:0; transition:opacity .3s}
.tl:hover .tl-ctrl, .tl:not(.playing) .tl-ctrl{opacity:1}
.tl-pp{background:none; border:none; color:#fff; font-size:13px; cursor:pointer; padding:0; line-height:1}
.tl-bar{flex:1; height:3px; background:rgba(255,255,255,.22); border-radius:2px; cursor:pointer; position:relative}
.tl-fill{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--accent); border-radius:2px}
.tl-spd{display:flex; gap:6px}
.tl-spd button{background:none; border:1px solid rgba(255,255,255,.3); color:#fff; font-size:10px; padding:3px 7px; border-radius:3px; cursor:pointer; opacity:.65; transition:opacity .2s, border-color .2s}
.tl-spd button:hover{opacity:.9}
.tl-spd button.on{opacity:1; border-color:var(--accent); color:var(--accent)}

/* ── Artifacts tile · discreet "has proof of work" badge ── */
.tile-proof{position:absolute; top:8px; right:8px; z-index:3; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; font-size:11px; line-height:1; text-decoration:none; color:#efede7;
  background:rgba(0,0,0,.42); backdrop-filter:blur(4px); outline:1px solid rgba(255,255,255,.28);
  opacity:.5; transition:opacity .25s ease, color .25s ease, background .25s ease, transform .25s ease}
.tile:hover .tile-proof{opacity:.95}
.tile-proof:hover{color:var(--accent); background:rgba(0,0,0,.6); opacity:1; transform:scale(1.1)}

/* ── LAB (embedded, usable mini-tools) ── */
#lab{max-width:760px; margin:0 auto; padding:88px 22px 80px}
#lab h1{font-size:clamp(26px,5vw,44px); letter-spacing:.1em; margin:0 0 10px}
.lab-sub{font-size:11px; letter-spacing:.22em; margin:0 0 44px;
  opacity:0; transform:translateY(16px); filter:blur(8px); transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1), filter 1s ease}
.lab-sub.in{opacity:1; transform:none; filter:blur(0)}
.lab-tool{margin:0 0 60px; opacity:0; transform:translateY(22px) scale(1.01); filter:blur(10px);
  transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1.1s ease}
.lab-tool.in{opacity:1; transform:none; filter:blur(0)}
.lab-tool-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid rgba(var(--line),.12); padding-bottom:10px}
.lab-tool-head h2{font-size:13px; letter-spacing:.3em; color:var(--accent); margin:0}
.lab-full{font-size:10.5px; letter-spacing:.14em; color:var(--dim); text-decoration:none; transition:color .25s}
.lab-full:hover{color:var(--accent)}
.lab-desc{font-size:11px; letter-spacing:.06em; margin:14px 0 18px; line-height:1.6}
.gl-stage{display:flex; justify-content:center; width:fit-content; max-width:100%; margin:0 auto; background:#000; border:1px solid rgba(var(--line),.1); border-radius:6px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.45)}
#glCanvas{display:block; max-width:100%; max-height:48vh; height:auto; width:auto; cursor:crosshair; touch-action:none}
.gl-controls{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:16px}
.gl-modes, .gl-actions{display:flex; gap:8px; flex-wrap:wrap}
.gl-modes button, .gl-actions button{font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.12em; color:var(--ink);
  background:rgba(var(--line),.04); border:1px solid rgba(var(--line),.16); border-radius:4px; padding:8px 13px; cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.gl-modes button:hover, .gl-actions button:hover{border-color:var(--accent); color:var(--accent)}
.gl-modes button.on{border-color:var(--accent); color:var(--accent)}
.gl-actions button.ghost{color:var(--dim)}
.gl-sources{display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap}
.gl-src-label{font-size:10px; letter-spacing:.2em}
#gl-thumbs{display:flex; gap:8px; flex-wrap:wrap}
.gl-thumb{width:44px; height:44px; border-radius:4px; background-size:cover; background-position:center; border:1px solid rgba(var(--line),.16); cursor:pointer; padding:0; transition:border-color .2s, transform .2s}
.gl-thumb:hover{transform:translateY(-2px)}
.gl-thumb.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.lab-foot{margin-top:50px; text-align:center; font-size:10px; letter-spacing:.28em; color:var(--dim)}
@media(max-width:560px){ #lab{padding:96px 16px 70px} .gl-controls{justify-content:center} }

/* dither controls (second row under the glitch modes) */
.gl-dither{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px}
.gl-dither button{font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--ink); background:rgba(var(--line),.04); border:1px solid rgba(var(--line),.16); border-radius:4px; padding:7px 11px; cursor:pointer; transition:border-color .2s, color .2s}
.gl-dither button:hover{border-color:var(--accent); color:var(--accent)}
.gl-dither button.on{border-color:var(--accent); color:var(--accent)}
.gl-dither-sep{color:var(--dim); opacity:.5; margin:0 2px}

/* LAB: experimental labelling + user upload */
.lab-exp{font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.24em; color:var(--accent); opacity:.85; margin:0 0 40px}
.lab-tag{display:inline-block; font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(var(--line),.22); border-radius:999px; padding:2px 8px; vertical-align:middle; margin-left:8px; opacity:.8}
.gl-upload{font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--accent);
  background:rgba(var(--line),.04); border:1px solid var(--accent); border-radius:4px; padding:7px 12px; cursor:pointer; transition:background .2s, color .2s}
.gl-upload:hover{background:var(--accent); color:var(--bg)}
.gl-sample{font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--dim);
  background:transparent; border:1px solid rgba(var(--line),.22); border-radius:4px; padding:7px 12px; cursor:pointer; transition:border-color .2s, color .2s}
.gl-sample:hover{border-color:var(--accent); color:var(--accent)}
.gl-hint{font-size:10px; letter-spacing:.12em; opacity:.75}
.gl-priv{font-size:9.5px; letter-spacing:.1em; opacity:.7; margin-top:10px}
.gl-stage.drop{outline:2px dashed var(--accent); outline-offset:-6px}

/* ── PIXEL tool ── */
.px-stage{display:flex; justify-content:center; margin:6px 0 16px}
#pxCanvas{touch-action:none; image-rendering:pixelated; image-rendering:crisp-edges; cursor:crosshair; border:1px solid rgba(var(--line),.14); background:#0f1216; max-width:100%}
.px-controls{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.px-tools, .px-actions{display:flex; gap:8px; flex-wrap:wrap}
.px-tools button, .px-actions button, .px-row2 button{font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.12em; color:var(--ink); background:rgba(var(--line),.04); border:1px solid rgba(var(--line),.16); border-radius:4px; padding:8px 11px; cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.px-tools button:hover, .px-actions button:hover, .px-row2 button:hover{border-color:var(--accent); color:var(--accent)}
.px-tools button.on, .px-row2 button.on{border-color:var(--accent); color:var(--accent); background:rgba(var(--line),.08)}
.px-actions button.ghost{color:var(--dim)}
#px-save{color:var(--accent); border-color:var(--accent)}
#px-save:hover{background:var(--accent); color:var(--bg)}
#px-undo:disabled{opacity:.4; cursor:default; border-color:rgba(var(--line),.16); color:var(--dim)}
.px-row2{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:14px}
#pxColor, #pxBg{width:34px; height:30px; padding:0; border:1px solid rgba(var(--line),.2); border-radius:4px; background:none; cursor:pointer; flex:none}
.px-bgnone{font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--dim); background:rgba(var(--line),.04); border:1px solid rgba(var(--line),.16); border-radius:4px; padding:7px 10px; cursor:pointer; transition:border-color .2s, color .2s}
.px-bgnone:hover{border-color:var(--accent); color:var(--accent)}
.px-bgnone.on{border-color:var(--accent); color:var(--accent); background:rgba(var(--line),.08)}
.px-pal{display:flex; gap:6px; flex-wrap:wrap}
.px-sw{width:22px; height:22px; border-radius:4px; border:1px solid rgba(var(--line),.2); padding:0; cursor:pointer; transition:transform .15s, box-shadow .15s}
.px-sw:hover{transform:translateY(-1px)}
.px-sw.on{box-shadow:0 0 0 2px var(--accent); border-color:var(--accent)}
.gl-stage.drop::after{content:""; position:absolute; inset:0; background:rgba(var(--line),.06)}
.gl-stage{position:relative}

/* ── ARTIFACTS collection filter bar ── */
/* text-only, discreet filters so the works carry the page (no loud pills) */
.filters{display:flex; flex-wrap:wrap; justify-content:center; gap:5px 20px; padding:84px 26px 22px; max-width:1000px; margin:0 auto}
.filters .fil{font-family:"Space Mono",monospace; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); background:none; border:none; border-radius:0; padding:3px 1px; cursor:pointer; opacity:.5;
  transition:color .25s, opacity .25s}
.filters .fil:hover{color:var(--ink); opacity:1}
.filters .fil.on{color:var(--accent); opacity:1}
@media(max-width:600px){ .filters{gap:5px 14px; padding:92px 14px 16px} }
#col-note{max-width:640px; margin:0 auto; text-align:center; font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:clamp(14px,1.4vw,16px); line-height:1.5; color:var(--ink2); padding:0 24px; max-height:0; opacity:0; overflow:hidden; transition:opacity .35s ease, max-height .35s ease, margin .35s ease}
#col-note.show{max-height:140px; opacity:1; margin:-4px auto 18px}
.filters .fil-info{font-family:"Space Mono",monospace; font-size:11px; line-height:1; color:var(--dim); background:none; border:none; cursor:pointer; opacity:.6; padding:0 2px; align-self:center; transition:color .2s, opacity .2s}
.filters .fil-info:hover, .filters .fil-info.on{color:var(--accent); opacity:1}
/* secondary TYPE filter (1/1 · Editions) — pill buttons, distinct from the collection tabs above */
.typefilters{display:flex; flex-wrap:wrap; justify-content:center; gap:3px 16px; padding:0 26px 24px; max-width:1000px; margin:-12px auto 0}
.typefilters .tfil{font-family:"Space Mono",monospace; font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); background:none; border:none; padding:2px 1px; cursor:pointer; opacity:.5; transition:color .2s, opacity .2s}
.typefilters .tfil:hover{color:var(--ink); opacity:1}
.typefilters .tfil.on{color:var(--accent); opacity:1}
@media(max-width:600px){ .typefilters{padding:0 14px 16px} }
/* recognition badge on the grid tile (works featured in notable external/collective collections) */
.tile-recog{position:absolute; top:8px; left:8px; z-index:3; font-family:"Space Mono",monospace; font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:3px 7px; border-radius:3px; border:1px solid rgba(255,255,255,.15); pointer-events:none; opacity:.88}

/* ── ARTIFACTS lightbox: loupe magnifier + zoom toggle ── */
.lb-loupe{position:fixed; z-index:33; width:240px; height:240px; border-radius:50%; pointer-events:none; display:none;
  background-repeat:no-repeat; background-color:#000;
  border:2px solid rgba(255,255,255,.72); box-shadow:0 14px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4)}
/* lightbox tools: two matching thin icon-buttons (expand/HD + magnifier), tooltips on hover, no labels */
.lb-tools{position:fixed; top:16px; right:52px; z-index:32; display:flex; align-items:center; gap:14px}
.lb-tools button{width:31px; height:31px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; padding:0; color:var(--ink); opacity:.5; transition:opacity .2s ease, color .2s ease}
.lb-tools button:hover{opacity:1; color:var(--accent)}
.lb-tools svg{display:block}
.lb-zoom.on{opacity:1; color:var(--accent)}
#lightbox.zooming .lb-art{cursor:crosshair}
.lb-art.zoomable{cursor:zoom-in}
.lb-art:focus{outline:none}
.lb-art:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* HD fullscreen viewer (fit <-> 100%, drag to pan, wheel/pinch to zoom) */
#hd{position:fixed; inset:0; z-index:60; background:#000; overflow:hidden; touch-action:none; cursor:grab; opacity:1; transition:opacity .22s ease}
#hd.hidden{opacity:0; pointer-events:none}
#hd.grabbing{cursor:grabbing}
#hdImg{position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; user-select:none; -webkit-user-drag:none; max-width:none; max-height:none}
.hd-load{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; color:#9fb3b8; font:11px/1 'Space Mono',monospace; letter-spacing:.2em; text-transform:uppercase}
.hd-close{position:fixed; top:16px; right:20px; z-index:61; background:none; border:none; color:#fff; opacity:.7; font-size:22px; line-height:1; cursor:pointer}
.hd-close:hover{opacity:1; color:var(--accent)}
.hd-hint{position:fixed; bottom:16px; left:0; right:0; text-align:center; color:#8aa0a6; font:10px/1 'Space Mono',monospace; letter-spacing:.16em; text-transform:uppercase; opacity:.85; pointer-events:none}

/* ── ARTIFACTS "TODAS" overview: works grouped by collection, each its own labelled masonry ── */
#grid.grouped{column-count:initial}
.gcol{margin:0 0 36px}
.gcol-h{text-align:center; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin:4px 0 18px}
.gcol-grid{column-count:4; column-gap:16px}
@media(max-width:1200px){ .gcol-grid{column-count:3} }
@media(max-width:820px){ .gcol-grid{column-count:2} }

/* artist statement */
.home-statement{ font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-style:italic; font-size:clamp(14px,1.25vw,18px); line-height:1.55; color:var(--ink2); max-width:40ch; margin:14px 0 0; border-left:2px solid var(--accent); padding-left:14px; }
.artist-statement{ margin:22px 0 42px; padding:0; max-width:64ch; border:none; }
.artist-statement .as-label{ display:block; font-family:"Space Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.28em; color:var(--accent); margin-bottom:12px; }
.artist-statement .as-text{ font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-style:italic; font-size:clamp(19px,2.1vw,27px); line-height:1.45; color:var(--ink); }