/* old colors */ 

/* :root {
  --void: #131210;
  --panel: #1c1a17;
  --panel-2: #221f1b;
  --ink: #eeece5;
  --ink-dim: #948f86;
  --line: #2e2b26;
  --cyan: #2de2d6;
  --amber: #ffb33e;
  --magenta: #ff3e7f;
  --violet: #9b6bff;

  
  --pill-ink: #131210;


  --sans: 'Instrument Sans', sans-serif; 
  --mono: 'IBM Plex Mono', monospace;
} */

:root {
  /* --void: #ffffff;
  --panel: #f5f5f7;
  --panel-2: #eaeaec; */
  --ink: #141416;
  --ink-dim: #6e6e76;
  /* --line: #e4e4e7; */

--void: #ededef;
--panel: #e3e3e7;
--panel-2: #e4e4e7;
--line: #dcdce0;

  --cyan-fill: #5eead4;
  --cyan-text: #0f766e;
  --amber-fill: #fdba74;
  --amber-text: #c2410c;
  --magenta-fill: #f9a8d4;
  --magenta-text: #be185d;
  --violet-fill: #c4b5fd;
  --violet-text: #6d28d9;

  --pill-ink: #141416;

  --sans: 'Instrument Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
}

a { color: inherit; text-decoration: none; }



header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 40px;
  border-bottom: 1px solid var(--line);
}

.wordmark { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

nav a {
  font-family: var(--mono);
  font-size: 12px;
  margin-left: 26px;
  color: var(--ink-dim);
  transition: color 0.15s ease;
}
nav a.active { color: var(--ink); }
nav a:hover, nav a:focus-visible { color: var(--cyan-text); }

.hero {
  max-width: 720px;
  margin: 60px auto 8px;
  padding: 0 40px;
}

.hero h1 {
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 18px;
}

.hl { background: linear-gradient(transparent 62%, rgba(94,234,212,0.5) 62%); }
.hero p.sub {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.7;
  max-width: 520px;
}

/* ---------- filters (index page) ---------- */
.filters {
  max-width: 1040px;
  margin: 52px auto 0;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}

.filters button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 12px;
}

.dotkey { width: 7px; height: 7px; border-radius: 1px; background: var(--ink-dim); flex: none; }

/* old colors */
/* .filters button[data-filter="art"] .dotkey { background: var(--cyan); }
.filters button[data-filter="research-writing"] .dotkey { background: var(--amber); }
.filters button[data-filter="workshops"] .dotkey { background: var(--magenta); }
.filters button[data-filter="collaborations"] .dotkey { background: var(--violet); }

.filters button:hover { color: var(--ink); }
.filters button.active { color: var(--ink); }
.filters button[data-filter="art"].active { color: var(--cyan); border-bottom-color: var(--cyan); }
.filters button[data-filter="research-writing"].active { color: var(--amber); border-bottom-color: var(--amber); }
.filters button[data-filter="workshops"].active { color: var(--magenta); border-bottom-color: var(--magenta); }
.filters button[data-filter="collaborations"].active { color: var(--violet); border-bottom-color: var(--violet); }
.filters button[data-filter="all"].active { border-bottom-color: var(--ink); } */

.filters button[data-filter="art"] .dotkey { background: var(--cyan-text); }
.filters button[data-filter="research-writing"] .dotkey { background: var(--amber-text); }
.filters button[data-filter="workshops"] .dotkey { background: var(--magenta-text); }
.filters button[data-filter="collaborations"] .dotkey { background: var(--violet-text); }

.filters button[data-filter="art"].active { color: var(--cyan-text); border-bottom-color: var(--cyan-text); }
.filters button[data-filter="research-writing"].active { color: var(--amber-text); border-bottom-color: var(--amber-text); }
.filters button[data-filter="workshops"].active { color: var(--magenta-text); border-bottom-color: var(--magenta-text); }
.filters button[data-filter="collaborations"].active { color: var(--violet-text); border-bottom-color: var(--violet-text); }

.count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  padding-bottom: 12px;
}


.index-list {
  list-style: none;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 40px 100px;
}

.entry {
  display: flex;
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  outline: none;
  cursor: pointer;
}
.entry.hidden { display: none; }




.thumb {
  flex: none;
  width: 136px;
  height: 100px;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: all 0.7s ease-in}

/* .thumb img:hover{
  transform: scale(1.5);
 
} */

.thumb-pending {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  padding: 0 10px;
}



.entry-body { flex: 1; min-width: 0; }

.entry-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.catno {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin-right: 4px;
}

.entry-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 2px;
  color: var(--pill-ink);
  font-weight: 500;
}

/* old colors */
/* .entry-tag[data-cat="art"] { background: var(--cyan); }
.entry-tag[data-cat="research-writing"] { background: var(--amber); }
.entry-tag[data-cat="workshops"] { background: var(--magenta); }
.entry-tag[data-cat="collaborations"] { background: var(--violet); } */

.entry-tag[data-cat="art"] { background: var(--cyan-fill); }
.entry-tag[data-cat="research-writing"] { background: var(--amber-fill); }
.entry-tag[data-cat="workshops"] { background: var(--magenta-fill); }
.entry-tag[data-cat="collaborations"] { background: var(--violet-fill); }

.entry[data-primary="art"], .hero-frame[data-primary="art"], .artwork-detail[data-primary="art"], .gallery-grid[data-primary="art"] { --c: var(--cyan-text); }
.entry[data-primary="research-writing"], .hero-frame[data-primary="research-writing"], .artwork-detail[data-primary="research-writing"], .gallery-grid[data-primary="research-writing"] { --c: var(--amber-text); }
.entry[data-primary="workshops"], .hero-frame[data-primary="workshops"], .artwork-detail[data-primary="workshops"], .gallery-grid[data-primary="workshops"] { --c: var(--magenta-text); }
.entry[data-primary="collaborations"], .hero-frame[data-primary="collaborations"], .artwork-detail[data-primary="collaborations"], .gallery-grid[data-primary="collaborations"] { --c: var(--violet-text); }

/* status flag — separate from category pills on purpose:
   outlined not filled, neutral not accent-colored, so it
   never looks like a fifth type in the four-color system */
.status-tag {
  background: none;
  border: 1px dashed var(--ink-dim);
  color: var(--ink-dim);
}

.entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.entry-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  transition: color 0.15s ease;
}
.entry:hover .entry-title { color: var(--c); }

.entry-year { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; }

.entry-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-dim);
  margin: 7px 0 7px;
}

.entry-desc {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}

.entry-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--c);
  border-bottom: 1px solid currentColor;
  opacity: 0.85;
}
.entry-link:hover { opacity: 1; }

.hovering-link{
  text-decoration: underline;
}
/* old colors */
/* 
.hovering-link[data-cat="art"]:hover { color: var(--cyan); }   
.hovering-link[data-cat="research-writing"]:hover { color: var(--amber); }        
.hovering-link[data-cat="workshops"]:hover { color: var(--magenta); }    
.hovering-link[data-cat="collaborations"]:hover { color: var(--violet); }

.entry[data-primary="art"], .hero-frame[data-primary="art"], .artwork-detail[data-primary="art"], .gallery-grid[data-primary="art"] { --c: var(--cyan); }
.entry[data-primary="research-writing"], .hero-frame[data-primary="research-writing"], .artwork-detail[data-primary="research-writing"], .gallery-grid[data-primary="research-writing"] { --c: var(--amber); }
.entry[data-primary="workshops"], .hero-frame[data-primary="workshops"], .artwork-detail[data-primary="workshops"], .gallery-grid[data-primary="workshops"] { --c: var(--magenta); }
.entry[data-primary="collaborations"], .hero-frame[data-primary="collaborations"], .artwork-detail[data-primary="collaborations"], .gallery-grid[data-primary="collaborations"] { --c: var(--violet); } */

.hovering-link[data-cat="art"]:hover { color: var(--cyan-text); }
.hovering-link[data-cat="research-writing"]:hover { color: var(--amber-text); }
.hovering-link[data-cat="workshops"]:hover { color: var(--magenta-text); }
.hovering-link[data-cat="collaborations"]:hover { color: var(--violet-text); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1040px;
  margin: 1rem auto 36px;
  padding: 0 40px;
}
.grid-centered{
  align-self: center;
  justify-self: center;
}

.gallery-item .frame-inner { position: relative; border: 1px solid var(--line); background: var(--panel); }
.gallery-item img { width: 100%; height: 260px; object-fit: cover; display: block; }
.gallery-item .crop { width: 14px; height: 14px; opacity: 0.85; }
.gallery-item .frame-caption { text-align: left; }

/* ---------- status bar (index page) ---------- */
.status-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 9px 24px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  display: flex;
  justify-content: space-between;
}
.status-bar .path span { color: var(--cyan-text); }

.status-links { display: flex; gap: 18px; }
.status-links a { color: var(--ink-dim); }
.status-links a:hover { color: var(--cyan-text); }

/* ---------- project detail page ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  margin: 32px 40px 0;
}
.back-link:hover { color: var(--cyan); }

.detail {
  max-width: 1040px;
  margin: 28px auto 0;
  padding: 0 40px;
}

.artwork-detail{
  display: flex;
  flex-direction: row;
  gap: 2rem;
  max-width: 1040px;
}

.artwork-detail-img{
  width: 30rem;
}
.detail .entry-topline { margin-bottom: 16px; }

.detail h1.title {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 12px;
}

.detail .meta-line {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  margin-bottom: 36px;
}
.detail .meta-line .year::before { content: "— "; }

.hero-frame {
  position: relative;
  margin: 0 auto 36px;
  max-width: 1040px;
  padding: 0 40px;
}
.hero-frame .frame-inner { position: relative; border: 1px solid var(--line); background: var(--panel); }
.hero-frame img { width: 100%; display: block; }
.hero-frame .crop { width: 16px; height: 16px; opacity: 0.85; }

.frame-caption{
  margin: 0.15rem;
  font-size: 0.7rem;

}

.body-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 620px;
}
.body-text p { margin: 0 0 18px; }

.body-text a{
  text-decoration: underline;
}

.body-text a[data-cat="research-writing"]:hover{
   color: var(--amber); border-bottom-color: var(--amber);

}

.exhibitions {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.exhibitions h2 {
  font-family: var(--sans);
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 14px;
  
}
.exhibitions ul { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.exhibitions li { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.exhibitions li:last-child { border-bottom: none; }
.exhibitions li .venue { color: var(--ink-dim); font-family: var(--mono); font-size: 11.5px; }

.talk-desc{
  font-size: 15px;
}
.pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 64px auto 100px;
  max-width: 1040px;
  padding: 24px 40px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
}
.pager a { color: var(--ink-dim); max-width: 45%; }
.pager a:hover { color: var(--ink); }
.pager .next { text-align: right; }
.pager .dir {
  display: block;
  font-size: 10px;
  color: var(--ink-dim);
  margin-bottom: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* about pg */

.about-wrap {
  display: flex;
  gap: 3.5rem;
  max-width: 65rem;
  margin: 3.75rem auto 1.6rem;
  padding: 0 2.5rem;
  flex-wrap: wrap;
}
 
.about-photo {
  flex: 1 1 21.25rem;
  max-width: 25rem;
  border: 1px solid var(--line);
  background: var(--panel);
}
.about-photo img { width: 100%; display: block; }
 
.about-text { flex: 2 1 26.25rem; font-size: 0.93rem; line-height: 1.75; }
.about-text p { margin: 0 0 1.2rem; max-width: 35rem; }
 
.email-highlight {
  display: inline-block;
  background: var(--cyan-fill); 
  color: var(--pill-ink);
  font-family: var(--mono);
  font-style: italic;
  font-size: 13px;
  padding: 4px 9px;
  margin-top: 12px;
}

.email-highlight:hover { background: var(--amber-fill); }
 
@media (max-width: 640px) {
  .about-wrap { padding-left: 20px; padding-right: 20px; }
}



@media (max-width: 640px) {
  header, .hero, .filters, .index-list, .detail, .hero-frame, .pager, .back-link, .cv-wrap { padding-left: 20px; padding-right: 20px; }
  .entry { flex-direction: column; }
  .thumb { width: 100%; height: 170px; }
  .count { margin-left: 0; width: 100%; }
  .status-bar { justify-content: center; padding: 10px 16px; }
  .status-bar .path { display: none; }
  .status-links { gap: 14px; font-size: 10.5px; }
  .pager { flex-direction: column; gap: 16px; }
  .pager a { max-width: 100%; }
  .cv-row { flex-direction: column; gap: 4px; }
  .cv-when { width: auto; }
  .artwork-detail { flex-direction: column; }
  .artwork-detail-img { width: 100%; }
  .gallery-grid { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
}

/* ---------- CV page ---------- */
.cv-wrap {
  max-width: 760px;
  margin: 56px auto 100px;
  padding: 0 40px;
}

.cv-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}
.cv-head h1 { font-size: 26px; font-weight: 700; margin: 0; }
.cv-download {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  border-bottom: 1px solid currentColor;
}
.cv-download:hover { color: var(--cyan-text); }

.cv-section { margin-bottom: 48px; }
.cv-section h2 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  font-weight: 500;
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.cv-row {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.cv-row:last-child { border-bottom: none; }

.cv-when {
  flex: none;
  width: 108px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-dim);
  padding-top: 2px;
}

.cv-what { flex: 1; }
.cv-title { font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.cv-org { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.cv-view {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cyan-text);
  border-bottom: 1px solid currentColor;
}

.cv-skills { display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; line-height: 1.6; padding-top: 8px; }
.cv-skill-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 2px;
}