/* ---------- vrtl font (same as the og page) ---------- */
@font-face {
  font-family: 'vrtlfinale';
  src: url('../fonts/vrtlfinale.woff2') format('woff2'),
       url('../fonts/vrtlfinale.woff') format('woff'),
       url('../fonts/vrtlfinale.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --paper: #ffffff;
  --ink: #101010;
  --mute: #8a8a8a;
  --hairline: #e8e8e8;
  --online: #1fc77d;
  --font: 'vrtlfinale', "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-w: 1100px;
  --pad: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }

.caps {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
}

/* ---------- header ---------- */
#site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  padding: 22px var(--pad) 0;
}
.wordmark {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  padding-left: 0.42em; /* optically center the tracked text */
}
.wordmark:hover { animation: glitch 0.28s steps(2) 1; }
@keyframes glitch {
  0%   { transform: translate(0, 0); opacity: 1; }
  25%  { transform: translate(-2px, 1px); opacity: 0.55; }
  50%  { transform: translate(2px, -1px); opacity: 0.85; }
  75%  { transform: translate(-1px, 0); opacity: 0.6; }
  100% { transform: translate(0, 0); opacity: 1; }
}

#main-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 30px;
  padding: 14px 0 16px;
}
#main-nav a {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: var(--ink);
}
#main-nav a.active { color: var(--mute); }
.nav-gif {
  display: inline-block;
  height: 14px;
  width: auto;
  margin-left: 5px;
  vertical-align: -2px;
}
#main-nav a:hover .nav-gif { transform: scale(1.6); }
.nav-sub-row {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 2px;
}
.nav-sub-row a.sub {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--mute);
}
.nav-sub-row a.sub:hover { color: var(--ink); }
/* s·h·o·p gifs at the bottom of the page, random size, always in the
   background (behind the images), appearing on scroll */
#shop-bottom {
  position: fixed;
  bottom: 10px;
  z-index: -1;               /* behind page content */
  display: flex;
  gap: 2px;
  line-height: 0;
  cursor: pointer;
  transform: scale(var(--sc, 1));
  transform-origin: left bottom;
  transition: opacity 0.5s;
}
#shop-bottom[hidden] { display: none; }
#shop-bottom img { height: 46px; width: auto; display: block; }
@media (max-width: 760px) { #shop-bottom img { height: 34px; } }

#menu-btn {
  display: none;
  position: absolute;
  right: var(--pad);
  top: 22px;
  background: none;
  border: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0;
}

/* ---------- menu overlay (mobile / full menu) ---------- */
#menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  padding: 28px var(--pad);
  overflow-y: auto;
}
#menu-close {
  position: absolute;
  right: var(--pad);
  top: 26px;
  background: none;
  border: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
#menu-content { margin-top: 12vh; text-align: center; }
#menu-content .menu-pages a {
  display: block;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 0;
}
#menu-content .menu-links {
  margin-top: 7vh;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
}
#menu-content .menu-links a {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

/* og-style news ticker at the very top of the landing */
.hero-ticker {
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.hero-ticker-track {
  display: inline-block;
  padding: 6px 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: roll-left 120s linear infinite;
}
/* white SEO text — near-invisible to readers, full to crawlers & AI */
.hero-ticker.ticker-white { border-color: #fff; background: #fff; }
.hero-ticker.ticker-white .hero-ticker-track { color: #fff; }

/* ---------- landing hero ---------- */
.hero {
  position: relative;
  height: calc(100vh - 92px);
  min-height: 420px;
  overflow: hidden;
  background: #f4f4f4;
}
.hero.hero-small { height: min(58vh, 520px); }

/* mini curate phone teaser + Hï variety in the feed */
.fmod-curate { display: block; max-width: 260px; text-align: center; }
.fmod-curate .caps { color: var(--mute); display: block; margin-bottom: 10px; }
.mini-phone {
  position: relative; width: 180px; margin: 0 auto; aspect-ratio: 9 / 16;
  background: #111; border: 8px solid #1b1b1b; border-radius: 26px; overflow: hidden;
}
.mini-phone .mini-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 40%; height: 12px; background: #1b1b1b; border-radius: 0 0 8px 8px; z-index: 2; }
.mini-phone img { width: 100%; height: 100%; object-fit: cover; }
.mini-actions { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; color: #fff; font-size: 18px; }
.mini-actions .mini-heart { color: #1fc77d; }
.fmod-curate .fmod-more { margin-top: 10px; }
.fmod-hi { display: block; max-width: 560px; }
.fmod-hi .caps { color: var(--mute); display: block; margin-bottom: 8px; }
.fmod-hi video { width: 100%; height: auto; }
.fmod-hi .embed-window { height: 300px; position: relative; overflow: hidden; }
.fmod-hi .embed-window iframe { width: 100%; height: 100%; border: 0; }
.fmod-hi.hi-full { max-width: 760px; }
.fmod-hi .hi-tall { height: 60vh; }
.hero .hero-media,
.hero .hero-media img,
.hero .hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .hero-scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent);
  pointer-events: none;
}
.hero .hero-text {
  position: absolute;
  left: 5%;
  bottom: 6%;
  color: #fff;
  max-width: 640px;
}
.hero .hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 10px;
}
.hero .hero-headline {
  font-size: clamp(34px, 6vw, 68px);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 12px;
}
.hero .hero-sub {
  font-size: 14px;
  letter-spacing: 0.04em;
  margin: 0 0 26px;
  opacity: 0.92;
}
.hero.no-media { background: var(--paper); }
.hero.no-media .hero-text { color: var(--ink); }
.hero.no-media .hero-scrim { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 12px 34px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: transparent;
  color: inherit;
  transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}

/* ---------- page sections ---------- */
.page {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 56px var(--pad) 80px;
}
.section-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 40px 0 24px;
}
.page-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  margin: 0 0 8px;
}

/* ---------- shows list ---------- */
.show-card { margin: 0 0 64px; }
.show-card .card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f4f4f4;
}
.show-card .card-media img,
.show-card .card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.show-card a:hover .card-media img,
.show-card a:hover .card-media video { transform: scale(1.03); }
.show-card .card-caption { padding: 16px 0 0; }
.show-card .card-title { font-size: 22px; font-weight: 400; margin: 0; }
.show-card .card-meta { color: var(--mute); font-size: 13px; margin-top: 2px; }

.past-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.past-grid .show-card { margin: 0; }
.past-grid .card-title { font-size: 17px; }

/* ---------- show detail ---------- */
.show-hero {
  position: relative;
  height: 68vh;
  min-height: 320px;
  overflow: hidden;
  background: #f4f4f4;
}
.show-hero img, .show-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.show-head { text-align: center; padding: 52px var(--pad) 8px; }
.show-head .show-meta {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 10px;
}

/* ---------- content blocks ---------- */
.blocks { max-width: var(--page-w); margin: 0 auto; padding: 24px var(--pad) 80px; }
.block { margin: 44px auto; }
.block-heading h2 {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin: 0;
}
.block-text {
  max-width: 680px;
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.75;
}
.block-media figure { margin: 0; }
.block-media figcaption {
  font-size: 12px;
  color: var(--mute);
  padding-top: 10px;
  text-align: center;
}
.block-media.size-full { max-width: 100%; }
.block-media.size-medium { max-width: 760px; }
.block-media.size-small { max-width: 480px; }
.block-media img, .block-media video { width: 100%; height: auto; }

/* ---------- works grid ---------- */
.works-grid { columns: 2; column-gap: 48px; }
.work-item {
  break-inside: avoid;
  margin: 0 0 56px;
  display: block;
}
.work-item img, .work-item video { width: 100%; height: auto; background: #f4f4f4; }
.work-caption { padding-top: 12px; font-size: 13px; }
.work-caption .work-title { font-style: italic; }
.work-caption .work-meta { color: var(--mute); }

/* lightbox */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(255,255,255,0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  cursor: zoom-out;
}
#lightbox img, #lightbox video { max-width: 100%; max-height: 88vh; width: auto; height: auto; }
#lightbox .lb-caption {
  position: absolute;
  bottom: 3vh;
  left: 0; right: 0;
  text-align: center;
  font-size: 13px;
  color: var(--mute);
}

/* ---------- Instagram grid ---------- */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.insta-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f4f4;
  display: block;
}
.insta-cell img, .insta-cell video { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s; }
.insta-cell:hover img, .insta-cell:hover video { transform: scale(1.06); }
.insta-badge { position: absolute; top: 8px; right: 10px; color: #fff; font-size: 12px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.insta-cap {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px; font-size: 12px; opacity: 0; transition: opacity 0.25s;
}
.insta-cell:hover .insta-cap { opacity: 1; }
.insta-del { position: absolute; top: 6px; left: 6px; z-index: 3; }
@media (min-width: 760px) { .insta-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- shared background drawing (Vita & Contact) ---------- */
/* the draw canvas sits ON TOP and captures every stroke; a tap (no drag)
   is forwarded to whatever is underneath, so links still work. */
#draw-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  cursor: crosshair;
  touch-action: none;
}
#app { position: relative; }
.page, .blocks, .xcontact { position: relative; z-index: 1; }
/* no accidental text selection while drawing */
body.has-draw, body.has-draw .page { user-select: none; -webkit-user-select: none; }
/* mobile view-only: the saved drawing sits BEHIND the content, no input, so
   the page stays scrollable/tappable for visitors (owner draws in editor). */
body.draw-view-only #draw-bg { z-index: 0; pointer-events: none; cursor: default; }
.blocks-compact .block-text, .blocks-compact .block-heading, .xc-line { background: rgba(255,255,255,0.55); }

/* ---------- vita: portrait to the left of the bio ---------- */
.portrait-switch {
  margin: 0 22px 12px 0;
  cursor: pointer;
  position: relative;
}
.blocks-compact .portrait-switch { float: left; width: 200px; }
.portrait-switch img {
  width: 100%; max-height: 300px; object-fit: contain; /* full in view, never cut */
  background: #f2f2f2; display: block; transition: opacity 0.15s;
}
.portrait-switch .ps-hint { font-size: 9px; color: var(--mute); padding-top: 4px; text-align: center; }
.blocks-compact::after { content: ""; display: block; clear: both; }

/* ---------- the post-it note (lives IN the scrollable landing page) ---------- */
#postit {
  position: absolute;             /* scrolls with the page → move it anywhere */
  left: 24px; top: 150px;
  z-index: 47;
  width: 312px;                   /* ~30% bigger */
  background: #fdf06b;            /* classic post-it yellow */
  box-shadow: 0 16px 34px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.14);
  border-radius: 2px;
}
#postit .postit-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 7px; background: #f4e35c; cursor: grab;
  border-bottom: 1px solid #e6d54e;
}
#postit .postit-bar:active { cursor: grabbing; }
#postit .postit-grip { font-size: 9px; color: #8a7d2e; letter-spacing: 0.1em; margin-right: auto; }
#postit .pt-tool, #postit .pt-play {
  border: 0; background: none; cursor: pointer; font-size: 14px; padding: 2px 5px; opacity: 0.55; border-radius: 4px;
}
#postit .pt-tool.is-on { opacity: 1; background: #fffcdb; box-shadow: 0 0 0 1px #e0cf4a; }
#postit .pt-play { opacity: 0.85; }
#postit .postit-canvas { display: block; width: 312px; height: 260px; background: #fdf06b; touch-action: none; cursor: crosshair; }
#postit .postit-count { padding: 5px 8px; font-size: 9px; color: #8a7d2e; letter-spacing: 0.14em; border-top: 1px solid #efe05a; }
/* 30% smaller on mobile */
@media (max-width: 760px) {
  #postit { width: 220px; }
  #postit .postit-canvas { width: 220px; height: 182px; }
}

.draw-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 130; background: var(--ink); color: var(--paper);
  padding: 8px 16px; font-size: 12px; border-radius: 20px;
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.draw-toast.show { opacity: 1; }

/* autoplay video preview embeds (YouTube / Vimeo) */
.block-videoembed .ve-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.block-videoembed.size-medium { max-width: 760px; }
.block-videoembed .ve-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.block-videoembed figcaption { font-size: 12px; color: var(--mute); padding-top: 8px; text-align: center; }

/* multimedia project preview grid (Vita) */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.proj-card { display: block; position: relative; }
.proj-card .pg-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f4f4; border: 1px solid var(--hairline); }
.proj-card .pg-media img, .proj-card .pg-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.proj-card:hover .pg-media img, .proj-card:hover .pg-media video { transform: scale(1.06); }
.proj-card .pg-frame { position: absolute; inset: 0; }
.proj-card .pg-frame iframe { width: 200%; height: 200%; border: 0; transform: scale(0.5); transform-origin: top left; pointer-events: none; }
.proj-card .pg-shield { position: absolute; inset: 0; }
.proj-card .pg-label { display: block; font-size: 11px; padding-top: 5px; letter-spacing: 0.04em; }
.proj-card .pg-desc { font-size: 12px; color: var(--mute); margin: 3px 0 0; line-height: 1.5; }
/* big portfolio grid */
.proj-grid-big { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.proj-grid-big .proj-card .pg-media { aspect-ratio: 16 / 10; }
.proj-grid-big .proj-card .pg-label { font-size: 16px; font-weight: 500; padding-top: 10px; }
.proj-grid-big .proj-card:hover .pg-label { text-decoration: underline; }

/* page tracking overlay (dotted crosshairs following the cursor) */
.page-track { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.page-track .mm-hline, .page-track .mm-vline { position: absolute; opacity: 0.3; }
.page-track .mm-hline { left: 0; right: 0; height: 1px; top: 30%; background-image: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 9px); }
.page-track .mm-vline { top: 0; bottom: 0; width: 1px; left: 50%; background-image: repeating-linear-gradient(0deg, var(--ink) 0 4px, transparent 4px 9px); }
.page-track .mm-target { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1px solid var(--ink); border-radius: 50%; opacity: 0.4; }
.page-track .mm-target[data-t="1"] { width: 42px; height: 42px; margin: -21px 0 0 -21px; opacity: 0.25; }

/* ---------- vita: compact layout ---------- */
.blocks-compact { max-width: 820px; }
.blocks-compact .block { margin: 16px auto; }
.blocks-compact .block-heading { margin-top: 30px; }
.blocks-compact .block-heading h2 {
  text-align: left;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.blocks-compact .block-text {
  max-width: 100%;
  font-size: 14px;
  line-height: 1.6;
}
.blocks-compact .block-random { max-width: 220px; margin-left: 0; }
.blocks-compact .block-link { display: inline-block; margin: 6px 10px 6px 0; }
.blocks-compact .block-link .btn { padding: 8px 16px; }
.blocks-compact .btn-with-icon { padding: 6px 18px 6px 8px; }
.blocks-compact .btn-icon { width: 26px; height: 26px; }

/* ---------- contact: straight layout, letters pushed by drawing ---------- */
.xcontact {
  position: relative;
  min-height: 70vh;
  padding: 30px var(--pad);
}
.xc-stage {
  position: relative;
  height: clamp(160px, 26vh, 300px);
  margin: 10px 0 20px;
}
.xc-big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 1;
}
.xc-big .xc-letter {
  font-size: clamp(56px, 18vw, 200px);
  font-weight: 300;
  letter-spacing: 0.01em;
  display: inline-block;
  will-change: transform;
}
/* once the physics takes over, the container just holds absolute letters */
.xc-big.is-physics { display: block; }
.xc-line {
  max-width: 520px;
  margin: 10px auto 24px;
  text-align: center;
  font-size: 15px;
  color: var(--mute);
}
.xc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: center;
}
.xc-links .xc-link {
  font-size: clamp(15px, 2.2vw, 24px);
  border-bottom: 2px solid var(--ink);
  transition: background 0.2s;
}
.xc-links .xc-link:hover { background: var(--ink); color: var(--paper); }

/* ---------- Curate — artwork tinder ---------- */
.curate {
  max-width: 560px;
  margin: 0 auto;
  padding: 30px var(--pad) 60px;
  text-align: center;
  position: relative;
}
.curate-title { font-size: clamp(30px, 6vw, 52px); font-weight: 300; margin: 0; }
.curate-sub { color: var(--mute); margin: 6px 0 24px; }
.curate-loading { color: var(--mute); padding: 60px 0; }

/* 3D phone mockup holding the card stack */
.phone-frame {
  position: relative;
  width: min(360px, 88vw);
  aspect-ratio: 360 / 640;
  margin: 6px auto 0;
  background: #111;
  border: 12px solid #1b1b1b;
  border-radius: 42px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 2px #000;
  transform: perspective(1400px) rotateX(4deg);
}
.phone-notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 44%; height: 22px;
  background: #1b1b1b;
  border-radius: 0 0 14px 14px;
  z-index: 6;
}
.phone-screen {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  overflow: hidden;
  background: #000;
}
.card-stack {
  position: absolute;
  inset: 0;
  user-select: none;
}
.art-card {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
  transform: scale(calc(1 - var(--depth, 0) * 0.04)) translateY(calc(var(--depth, 0) * -8px));
  transition: transform 0.3s ease;
}
.art-card.is-top { cursor: grab; z-index: 3; }
.art-card.card-frame.is-top { cursor: default; }
.art-card.is-top.dragging { cursor: grabbing; transition: none; }
/* full-size with black letterbox — never crop the work */
.art-card img, .art-card video {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: #000; pointer-events: none;
}
.art-card .card-frame {
  width: 100%; height: 100%; border: 0; background: #000;
}
.art-card.is-top .card-frame { pointer-events: auto; }
.art-card .frame-shield { position: absolute; inset: 0; }
.art-card .card-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: #fff; text-align: left;
}
.art-card .card-title { font-size: 16px; }
.art-card .card-info {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.96);
  padding: 30px; text-align: left;
  display: flex; flex-direction: column; justify-content: center;
}
.art-card .card-info[hidden] { display: none; }
.art-card .card-info h3 { font-weight: 400; font-size: 22px; margin: 0 0 10px; }
.art-card .card-info p { color: #333; font-size: 14px; line-height: 1.6; }
.art-card .card-info a { margin-top: 14px; color: var(--ink); border-bottom: 1px solid var(--ink); align-self: flex-start; }
.card-stamp {
  position: absolute; top: 22px;
  font-size: 26px; font-weight: 700; letter-spacing: 0.1em;
  padding: 4px 14px; border: 3px solid; border-radius: 8px;
  opacity: 0; pointer-events: none;
}
.stamp-like { left: 20px; color: #1fc77d; border-color: #1fc77d; transform: rotate(-16deg); }
.stamp-nope { right: 20px; color: #e5484d; border-color: #e5484d; transform: rotate(16deg); }
/* always-visible like/dislike counts on every card */
.card-counts {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  background: rgba(0,0,0,0.5); color: #fff; padding: 4px 12px; border-radius: 20px;
  font-size: 10px; letter-spacing: 0.14em; white-space: nowrap;
}

/* animated like / X burst over the phone (random variant each time) */
.decide-fx {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  font-size: 140px; pointer-events: none;
}
.decide-fx.fx-like { color: #1fc77d; }
.decide-fx.fx-nope { color: #e5484d; }
.decide-fx.fxv-1 { animation: fx-pop 0.8s ease-out forwards; }
.decide-fx.fxv-2 { animation: fx-spin 0.85s cubic-bezier(.2,1.3,.5,1) forwards; }
.decide-fx.fxv-3 { animation: fx-drop 0.8s ease-out forwards; }
@keyframes fx-pop { 0% { transform: scale(0.2) rotate(var(--rot)); opacity: 0; } 30% { opacity: 1; } 60% { transform: scale(1.1) rotate(var(--rot)); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes fx-spin { 0% { transform: scale(0.1) rotate(-180deg); opacity: 0; } 40% { opacity: 1; transform: scale(1.05) rotate(10deg); } 100% { transform: scale(1.5) rotate(40deg); opacity: 0; } }
@keyframes fx-drop { 0% { transform: translateY(-60%) scale(0.6); opacity: 0; } 40% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { transform: translateY(20%) scale(1.4); opacity: 0; } }
.heart-bit {
  position: absolute; bottom: 20%; z-index: 8; color: #1fc77d; font-size: 20px;
  pointer-events: none; animation: heart-float 1s ease-out forwards;
}
@keyframes heart-float { 0% { transform: translate(0,0) scale(0.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx), -180px) scale(1.1); opacity: 0; } }
.card-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--mute); gap: 14px; }
.cr-reset, .match-close, .ci-go { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 10px 22px; cursor: pointer; font-size: 12px; letter-spacing: 0.1em; }

.curate-actions {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 26px;
}
.cr-btn {
  width: 64px; height: 64px; border-radius: 50%;
  border: 0; background: #fff; font-size: 26px; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.cr-btn.cr-no { color: #e5484d; }
.cr-btn.cr-yes { color: #1fc77d; }
.cr-btn.cr-info { width: 46px; height: 46px; font-size: 16px; font-style: italic; color: var(--mute); }
.cr-btn:hover { transform: scale(1.12) translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); }
.cr-yes:active { transform: scale(0.9); }
.cr-exhib { display: flex; justify-content: center; align-items: center; gap: 7px; cursor: pointer;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-top: 18px; }

/* enter-room button */
.enter-room {
  display: block;
  margin: 26px auto 0;
  background: none;
  border: 1px solid var(--ink);
  padding: 10px 22px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.enter-room:hover { background: var(--ink); color: var(--paper); }

/* the walk-in exhibition room */
.curate-room {
  position: fixed; inset: 0; z-index: 115;
  background: rgba(20, 20, 20, 0.6);
  opacity: 0; transition: opacity 0.4s;
  display: flex; flex-direction: column;
}
.curate-room.in { opacity: 1; }
.room-head {
  color: #fff; padding: 14px 18px; position: relative; z-index: 3;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.room-head .room-hint { color: #aaa; text-transform: none; letter-spacing: 0; font-size: 11px; }
.room-close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 28px; cursor: pointer; }
.room-floor {
  position: relative; flex: 1; margin: 0 18px 18px;
  background:
    linear-gradient(180deg, #cfcfcf 0%, #d8d8d8 42%, #bcbcbc 42%, #a8a8a8 100%);
  box-shadow: inset 0 0 80px rgba(0,0,0,0.25);
  overflow: hidden;
  perspective: 1400px;              /* 3D feel */
}
.room-walls { position: absolute; inset: 0; transform: rotateX(6deg); transform-origin: bottom; }
.room-walls .hung {
  position: absolute; width: 8%; min-width: 60px; aspect-ratio: 3 / 4;
  background: #fff; border: 3px solid #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.4);
  overflow: hidden; cursor: grab;
  transform: scale(var(--sc, 1));
}
.room-walls .hung.grabbing { cursor: grabbing; z-index: 5; }
.room-walls .hung img, .room-walls .hung video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.room-walls .hung:hover { outline: 2px solid #1fc77d; }

/* a work floating in a dark 3D space */
.room-3d {
  position: fixed; inset: 0; z-index: 125;
  background: radial-gradient(circle at 50% 40%, #2a2a2a, #0b0b0b);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.4s; perspective: 1600px;
}
.room-3d.in { opacity: 1; }
.r3d-work {
  transform-style: preserve-3d; transition: transform 0.1s;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
}
.r3d-work img, .r3d-work video { max-width: 70vw; max-height: 78vh; display: block; }
.r3d-close { position: absolute; top: 16px; right: 22px; background: none; border: 0; color: #fff; font-size: 30px; cursor: pointer; }
.room-empty { color: #555; text-align: center; margin-top: 20vh; }
.room-people { position: absolute; inset: 0; pointer-events: none; }
.visitor {
  position: absolute; top: 0; left: 0;
  background: #1a1a1a; border-radius: 50%;
  box-shadow: 0 6px 6px rgba(0,0,0,0.25);
  will-change: transform;
}
.visitor.shooting { background: #111; box-shadow: 0 0 0 4px rgba(255,255,255,0.7), 0 6px 6px rgba(0,0,0,0.25); }

/* toast */
.curate-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  z-index: 130; background: var(--ink); color: var(--paper);
  padding: 10px 20px; font-size: 12px; letter-spacing: 0.06em; border-radius: 24px;
  opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none;
}
.curate-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.curate-count {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  z-index: 5;
  text-align: center;
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  opacity: 0;
  pointer-events: none;
}
.curate-count.flash { animation: cr-flash 1.4s ease; }
@keyframes cr-flash { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* present icon + matches panel */
.curate-gift {
  position: fixed; left: 16px; top: 92px; z-index: 46;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 50%;
  width: 44px; height: 44px; font-size: 20px; cursor: pointer;
}
.curate-gift .gift-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  background: #e5484d; color: #fff; border-radius: 9px; font-size: 11px;
  display: none; align-items: center; justify-content: center; padding: 0 4px;
}
.curate-matches {
  position: fixed; left: 16px; top: 142px; z-index: 47;
  width: min(320px, 86vw); max-height: 70vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 0 16px 40px rgba(0,0,0,0.2); padding: 10px;
}
.cm-head { display: flex; justify-content: space-between; align-items: center; color: var(--mute); padding: 4px 4px 10px; }
.cm-close { background: none; border: 0; font-size: 20px; cursor: pointer; }
.cm-item { display: flex; gap: 10px; align-items: center; padding: 7px 4px; border-top: 1px solid var(--hairline); }
.cm-item img { width: 48px; height: 48px; object-fit: cover; }
.cm-item span { display: flex; flex-direction: column; font-size: 13px; }
.cm-item em { color: var(--mute); font-style: normal; font-size: 11px; }
.cm-empty { color: var(--mute); font-size: 12px; padding: 10px; }

/* match overlay */
.match-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.5s;
}
.match-overlay.in { opacity: 1; }
.match-card { text-align: center; transform: scale(0.85); transition: transform 0.5s cubic-bezier(0.2,1.3,0.5,1); }
.match-overlay.in .match-card { transform: scale(1); }
.match-kicker { color: #e5484d; letter-spacing: 0.3em; }
.match-card h2 { font-weight: 300; font-size: clamp(26px,5vw,40px); margin: 4px 0 18px; }
.match-card img { width: 220px; height: 280px; object-fit: cover; box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.match-name { font-style: italic; margin: 12px 0 20px; }
.match-see { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--mute); cursor: pointer; }
.match-burst {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(31,199,125,0.25), transparent 60%);
  animation: burst 0.8s ease-out;
}
@keyframes burst { from { transform: scale(0.2); opacity: 1; } to { transform: scale(2); opacity: 0; } }

/* intro */
.curate-intro {
  position: fixed; inset: 0; z-index: 108; background: rgba(16,16,16,0.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity 0.4s;
}
.curate-intro.in { opacity: 1; }
.ci-box { background: var(--paper); max-width: 420px; padding: 34px; text-align: left; }
.ci-box h2 { font-weight: 300; font-size: 28px; margin: 0 0 14px; }
.ci-box p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.ci-go { margin-top: 12px; }

@media (max-width: 760px) {
  .curate-gift { top: 74px; }
  .curate-matches { top: 122px; }
}

/* ---------- footer ---------- */
#site-footer {
  border-top: 1px solid var(--hairline);
  padding: 30px var(--pad) 40px;
  text-align: center;
}
#site-footer .foot-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-bottom: 18px;
}
#site-footer .foot-links a {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
#site-footer .foot-note { color: var(--mute); font-size: 12px; }
.online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--online);
  margin-right: 7px;
  vertical-align: 1px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.online-line {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---------- scroll effects ---------- */
[data-fx] { will-change: transform, opacity; }
[data-fx="fade-up"]:not(.fx-in) { opacity: 0; transform: translateY(28px); }
[data-fx="fade"]:not(.fx-in) { opacity: 0; }
[data-fx="zoom"]:not(.fx-in) { opacity: 0; transform: scale(0.94); }
[data-fx="slide-left"]:not(.fx-in) { opacity: 0; transform: translateX(48px); }
[data-fx="slide-right"]:not(.fx-in) { opacity: 0; transform: translateX(-48px); }
[data-fx="reveal"]:not(.fx-in) { clip-path: inset(0 0 100% 0); }
[data-fx="blur"]:not(.fx-in) { opacity: 0; filter: blur(14px); }
[data-fx="tilt"]:not(.fx-in) { opacity: 0; transform: rotate(-4deg) scale(0.96); }
[data-fx].fx-in { opacity: 1; transform: none; clip-path: none; filter: none; }
[data-fx]:not([data-fx="none"]) {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- hover effects (pickable) ---------- */
.hfx-underline { position: relative; }
.hfx-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.hfx-underline:hover::after { transform: scaleX(1); }

.btn.hfx-invert:hover, a.hfx-invert:hover { background: var(--ink); color: var(--paper); }
.hero .btn.hfx-invert:hover { background: #fff; color: var(--ink); border-color: #fff; }

.hfx-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hfx-lift:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }

.hfx-glitch:hover { animation: glitch 0.28s steps(2) 1; }

/* ---------- works: category cards (image / live iframe previews) ---------- */
.work-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 10px 0 30px;
}
.work-cat-card { display: block; position: relative; }
.work-cat-card .cat-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f4f4;
  border: 1px solid var(--hairline);
}
.work-cat-card .cat-media img, .work-cat-card .cat-media video {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;
}
.work-cat-card:hover .cat-media img, .work-cat-card:hover .cat-media video { transform: scale(1.06); }
.work-cat-card .cat-frame { position: absolute; inset: 0; }
.work-cat-card .cat-frame iframe {
  width: 200%; height: 200%; border: 0;
  transform: scale(0.5); transform-origin: top left; pointer-events: none;
}
.work-cat-card .cat-shield { position: absolute; inset: 0; }
.work-cat-card .cat-label {
  position: absolute; left: 10px; bottom: 10px;
  background: var(--ink); color: var(--paper);
  padding: 4px 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
@media (max-width: 760px) { .work-cat-grid { grid-template-columns: repeat(2, 1fr); } }

/* live interactive iframe grid (small, full page, active) */
.liveframe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}
.liveframe { border: 1px solid var(--hairline); }
.liveframe-win {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #f4f4f4;
}
.liveframe-win iframe {
  width: 200%;
  height: 600px;
  border: 0;
  transform: scale(0.5);
  transform-origin: top left;
}
.liveframe-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--hairline);
}
.liveframe-bar .lf-label { font-size: 13px; flex: 1; }
.liveframe-bar .lf-open { color: var(--mute); }
.liveframe-bar .lf-open:hover { color: var(--ink); }

/* video grid (youtube / vimeo) with remove buttons */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}
.vgrid-item { margin: 0; position: relative; }
.vgrid-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.vgrid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vgrid-frame .vgrid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vgrid-frame .vgrid-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.vgrid-frame:hover .vgrid-play { background: #e5484d; transform: translate(-50%, -50%) scale(1.1); }
.vgrid-item figcaption { font-size: 12px; color: var(--mute); padding-top: 8px; }
.vgrid-remove {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(16,16,16,0.7);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, background 0.2s;
}
.vgrid-item:hover .vgrid-remove { opacity: 1; }
.vgrid-remove:hover { background: #e5484d; }

/* ---------- works: small tiles, random image, direct link ---------- */
.works-hint { color: var(--mute); margin: -2px 0 26px; }
.works-grid-small {
  columns: unset;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 34px 26px;
}
.works-grid-small .work-item { margin: 0; }
.works-grid-small .work-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f4f4f4;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.works-grid-small .work-item video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f4f4f4; }
/* category tiles with a live iframe preview, cropped into the square tile */
.works-grid-small .work-tile .cat-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f4f4f4; }
.works-grid-small .work-tile .cat-frame iframe { width: 200%; height: 200%; border: 0; transform: scale(0.5); transform-origin: top left; pointer-events: none; }
.works-grid-small .work-tile .cat-shield { position: absolute; inset: 0; }
.works-grid-small .work-item:hover img { transform: scale(1.04); }
.work-caption .work-title { font-style: normal; font-weight: 500; font-size: 14px; }
.work-caption .work-meta { margin-top: 2px; font-size: 11.5px; }
.works-grid-small .work-caption { padding-top: 8px; }

/* ---------- shows list ---------- */
.show-row {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.show-row .row-thumbs {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  align-items: stretch;
  height: 220px;
}
.show-row .row-shot {
  overflow: hidden;
  background: #f4f4f4;
  display: block;
  width: 150px;
}
.show-row .row-shot.shot-lead { width: 300px; }
.show-row .row-shot:nth-child(n+3) { display: none; }
.show-row .row-shot img, .show-row .row-shot video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.show-row:hover .row-shot img, .show-row:hover .row-shot video { transform: scale(1.06); }
.show-row .row-body { flex: 1; min-width: 0; padding-top: 4px; }
@media (min-width: 1100px) { .show-row .row-shot:nth-child(3) { display: block; } }
.show-row .row-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.show-row .ax-title { font-weight: 500; font-size: 17px; }
.show-row .ax-title:hover { text-decoration: underline; }
.show-row .ax-visit { margin-left: auto; color: var(--mute); }
.show-row .row-blurb {
  margin: 6px 0 0;
  color: var(--mute);
  font-size: 13px;
  line-height: 1.55;
  max-width: 620px;
}
.show-visit { display: inline-block; margin-top: 12px; }

/* press — a super-mini list of links */
.press-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 10px;
}
.press-row .press-label {
  color: var(--mute);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 9px;
}
.press-link {
  font-size: 10px;
  color: var(--mute);
  border-bottom: 1px solid var(--hairline);
  line-height: 1.5;
}
.press-link:not(:last-child)::after { content: ""; }
.press-link:hover { color: var(--ink); border-color: var(--ink); }

/* buttons with app icons */
.btn-with-icon { display: inline-flex; align-items: center; gap: 12px; padding: 9px 26px 9px 12px; }
.btn-icon { width: 34px; height: 34px; border-radius: 8px; display: block; }

/* videos with sound */
.sound-hint {
  margin-top: 8px;
  text-align: center;
  color: var(--mute);
  cursor: pointer;
}
video[data-sound] { cursor: pointer; }

/* live-page preview window (random scroll position per load) */
.embed-preview { max-width: 860px; margin: 40px auto 0; padding: 0 var(--pad); }
.embed-window {
  position: relative;
  height: 420px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #000;
}
.embed-window iframe {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2600px;
  border: 0;
  pointer-events: none;
}
.embed-open { display: inline-block; margin-top: 10px; color: var(--mute); }

/* ---------- shows archive ---------- */
.archive { max-width: 860px; margin-bottom: 60px; }
.archive-year {
  font-size: 26px;
  font-weight: 300;
  margin: 34px 0 8px;
}
.archive-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.archive-row .ax-title { font-weight: 500; }
.archive-row .ax-venue, .archive-row .ax-city { color: var(--mute); }
.archive-row .ax-single {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1px 8px;
  color: var(--mute);
}
a.archive-row:hover .ax-title { text-decoration: underline; }

/* ---------- landing feed (endless scroll) ---------- */
.hero-scroll-hint {
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  animation: pulse 2.4s ease-in-out infinite;
}
#feed {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 40px var(--pad) 0;
  overflow: hidden;
}
#feed-sentinel { height: 2px; }
.feed-mod { margin: 46px 0; display: flex; }
.feed-mod.fm-left { justify-content: flex-start; }
.feed-mod.fm-center { justify-content: center; }
.feed-mod.fm-right { justify-content: flex-end; }
.feed-mod.fm-wide { justify-content: stretch; }
.feed-mod.fm-wide > * { width: 100%; }
.fmod { display: block; max-width: 640px; }
.fmod .caps { color: var(--mute); display: block; margin-bottom: 10px; }
.fmod h2, .fmod h3 { font-weight: 300; margin: 4px 0 6px; }
.fmod h3 { font-size: 26px; }
.fmod p { color: var(--mute); font-size: 13px; margin: 0; }

.fmod-show .fmod-media, .fmod-work .fmod-media {
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 14px;
}
.fmod-show img, .fmod-work img { width: 100%; height: auto; transition: transform 1.2s ease; }
.fmod-show:hover img, .fmod-work:hover img { transform: scale(1.04); }
.fm-wide .fmod-show, .fm-wide .fmod-work { max-width: 100%; }

.fmod-archive {
  border: 1px solid var(--hairline);
  padding: 30px 34px;
  min-width: min(420px, 100%);
}
.fmod-archive:hover { background: #fafafa; }
.fmod-more { margin-top: 14px; }

.fmod-gif img { max-width: min(440px, 100%); height: auto; }

.fmod-hover { position: relative; cursor: crosshair; }
.fmod-hover img { max-width: min(360px, 100%); height: auto; }
.hover-text {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  background: var(--paper);
  padding: 4px 12px;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  white-space: nowrap;
}
.fmod-hover:hover .hover-text, .fmod-data:hover .hover-text { opacity: 1; }

.fmod-ticker { width: 100%; overflow: hidden; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.ticker-track {
  white-space: nowrap;
  display: inline-block;
  padding: 12px 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: ticker 28s linear infinite;
}
body.editing .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }

.fmod-ascii pre {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  overflow: hidden;
  color: var(--ink);
  margin: 0 0 8px;
}
.fmod-ascii:hover pre { animation: glitch 0.28s steps(2) 1; }

.fmod-quote p {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  max-width: 520px;
  margin-bottom: 12px;
}

.fmod-special {
  border: 1px solid var(--ink);
  padding: 42px 48px;
  position: relative;
  min-width: min(460px, 100%);
  transition: background 0.25s, color 0.25s;
}
.fmod-special.has-media {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 30px;
}
.fmod-special .special-media {
  flex: 0 0 150px;
  width: 150px;
  height: 110px;
  overflow: hidden;
  display: block;
}
.fmod-special .special-media img, .fmod-special .special-media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.fmod-special:hover .special-media img, .fmod-special:hover .special-media video {
  transform: scale(1.08);
}
.fmod-special h2 { font-size: clamp(24px, 4vw, 38px); letter-spacing: 0.02em; }
.fmod-special .fmod-arrow { position: absolute; right: 22px; top: 18px; font-size: 20px; }
.fmod-special:hover { background: var(--ink); color: var(--paper); }
.fmod-special:hover .caps { color: #bbb; }

/* ---------- marquee blocks (rolling text rows) ---------- */
.block-marquee { max-width: 100%; }
.marquee-strip {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
}
.marquee-strip .marquee-inner {
  flex: 0 0 auto;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-right: 40px;
  animation: roll-left 22s linear infinite;
}
.marquee-strip.dir-right .marquee-inner { animation-name: roll-right; }
@keyframes roll-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes roll-right { from { transform: translateX(-100%); } to { transform: translateX(0); } }
body.editing .marquee-strip .marquee-inner { animation-play-state: paused; }

/* ---------- project websites: drifting live iframes ---------- */
.webproj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 44px 30px;
  margin-bottom: 40px;
}
.webproj .embed-window { height: 260px; }
.webproj .embed-window iframe { width: 125%; height: 1800px; transform-origin: top left; transform: scale(0.8); }
.webproj-frame { display: block; }
.webproj-frame .embed-window { transition: border-color 0.3s; }
.webproj-frame:hover .embed-window { border-color: var(--ink); }
/* slow vertical drift through the page — different phase per card */
.drift iframe { animation: drift-a 26s ease-in-out infinite alternate; }
.drift-b iframe { animation-name: drift-b; animation-duration: 32s; }
@keyframes drift-a { from { top: 0; } to { top: -900px; } }
@keyframes drift-b { from { top: -700px; } to { top: 0; } }
.webproj-label { font-size: 18px; font-weight: 500; margin: 12px 0 4px; }
.webproj-desc { color: var(--mute); font-size: 13px; margin: 0 0 6px; }

/* ---------- particle wordmark + INSTANT ---------- */
/* full-page overlay so the particles can roam the whole page; click-through.
   z-index just above the sticky header so the word shows over it too. */
#wordmark-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 41;
  pointer-events: none;
}
#site-header { position: relative; }
body.wordmark-particles #site-header { padding-top: 30px; }
body.wordmark-particles .wordmark { color: transparent; }
.fmod-instant .instant-canvas {
  width: 360px;
  height: 90px;
  max-width: 100%;
  display: block;
  cursor: crosshair;
}

/* ---------- OVER takeover: clicking OVER overwrites the whole page ------- */
#over-takeover {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  overflow: hidden;
  cursor: crosshair;
  transition: opacity 0.6s;
}
#over-takeover .over-strip {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#over-takeover .over-strip .marquee-inner {
  flex: 0 0 auto;
  padding-right: 60px;
  animation: roll-left linear infinite;
  animation-duration: inherit;
}
#over-takeover .over-strip.dir-right .marquee-inner { animation-name: roll-right; }
#over-takeover.frozen { cursor: not-allowed; }
#over-takeover.maxed::after {
  content: "— OVER —";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--mute);
}
#over-exit {
  position: absolute;
  right: 16px;
  top: 12px;
  z-index: 2;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- overlay layer (on top of everything) ---------- */
#overlay-layer {
  position: fixed;
  z-index: 55;
}
#overlay-layer.ov-through { pointer-events: none; }
#overlay-layer.ov-full {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#overlay-layer.ov-full img, #overlay-layer.ov-full video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#overlay-layer.ov-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(560px, 86vw);
  text-align: center;
}
#overlay-layer.ov-corner-br { right: 20px; bottom: 20px; max-width: 240px; }
#overlay-layer.ov-corner-tl { left: 20px; top: 90px; max-width: 240px; }
#overlay-layer img, #overlay-layer video { max-width: 100%; height: auto; display: block; }
#overlay-layer .ov-text {
  position: relative;
  background: var(--paper);
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
#overlay-layer.ov-full .ov-text { background: none; color: #fff; font-size: 20px; z-index: 1; }

/* random + iframe blocks */
.block-random figure, .block-iframe { margin: 0; }
.block-iframe .embed-window { max-width: 100%; }

/* PDF preview block */
.block-pdf figure { margin: 0; }
.block-pdf .pdf-open { position: relative; display: block; overflow: hidden; }
.block-pdf .pdf-open img { width: 100%; height: auto; display: block; box-shadow: 0 6px 30px rgba(0,0,0,0.12); transition: transform 0.5s; }
.block-pdf .pdf-open:hover img { transform: scale(1.02); }
.block-pdf .pdf-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 14px;
  font-size: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
}
.block-pdf .pdf-open:hover .pdf-badge { opacity: 1; transform: none; }

/* book reader overlay — real 3D page flip (StPageFlip) */
#book-reader {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(30, 26, 22, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#book-reader.br-in { opacity: 1; }
#book-reader .br-mount {
  width: min(92vw, 1100px);
  height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#book-reader .book-host { margin: 0 auto; }
#book-reader .book-page { background: #fff; overflow: hidden; }
#book-reader .book-page img { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; }
#book-reader .br-loading { color: #e8e0d6; font-size: 12px; }
#book-reader .br-loading a { color: #fff; border-bottom: 1px solid #fff; margin-left: 6px; }
#book-reader .br-title { color: #e8e0d6; }
#book-reader .br-count, #book-reader .br-close, #book-reader .br-nav { color: #fff; }
#book-reader .br-title {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--mute);
}
#book-reader .br-close {
  position: absolute;
  top: 14px;
  right: 20px;
  background: none;
  border: 0;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
#book-reader .br-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  font-size: 54px;
  color: var(--ink);
  cursor: pointer;
  padding: 0 18px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
#book-reader .br-nav:hover { opacity: 1; }
#book-reader .br-prev { left: 8px; }
#book-reader .br-next { right: 8px; }
#book-reader .br-count {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.2em;
}
@media (max-width: 820px) {
  #book-reader .br-nav { font-size: 40px; padding: 0 8px; }
}

/* ---------- daily gif page background (weekday gif, random spot) ---------- */
#bg-gif {
  position: fixed;
  z-index: -1;
  text-align: center;
  opacity: 0.92;
}
#bg-gif.spot-right { right: 18px; top: 50%; transform: translateY(-50%); }
#bg-gif.spot-left { left: 18px; top: 55%; transform: translateY(-50%); }
#bg-gif.spot-bottom-right { right: 24px; bottom: 70px; }
#bg-gif.spot-bottom-left { left: 24px; bottom: 70px; }
#bg-gif img { width: 150px; height: auto; display: block; margin: 0 auto 6px; }
#bg-gif.bg-big img { width: 360px; }
#bg-gif .caps { font-size: 8px; letter-spacing: 0.3em; color: var(--mute); text-transform: uppercase; }
@media (max-width: 1280px) { #bg-gif { display: none; } }
/* only show the roaming daily gif on the landing page */
body:not(.on-home) #bg-gif, body:not(.on-home) #bg-band { display: none; }

/* full-width looped gif band pinned to the bottom of the page background */
#bg-band {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  z-index: -1;
  overflow: hidden;
  opacity: 0.16;
  pointer-events: none;
}
#bg-band img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { #bg-band { height: 70px; } }

.fmod-simpsons .simpsons-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fmod-simpsons img { height: 74px; width: auto; transition: transform 0.25s; }
.fmod-simpsons img:hover { transform: translateY(-6px) rotate(-3deg); }

.fmod-data { position: relative; cursor: crosshair; }
.fmod-data .data-trigger { width: 80px; }
.fmod-data .data-grid {
  display: grid;
  grid-template-columns: repeat(3, 110px);
  gap: 8px;
  margin-top: 12px;
}
.fmod-data .data-grid img { width: 110px; height: 110px; object-fit: cover; }

.fmod-clockframe { width: 100%; max-width: 720px; }
.fmod-randomframe { width: 100%; max-width: 680px; }
.fmod-randomframe .embed-window { height: 400px; }
.fmod-randomframe .frame-full { height: 480px; }
.fmod-randomframe .frame-full iframe {
  position: absolute;
  top: 0;
  animation: frame-travel 30s ease-in-out infinite alternate;
}
@keyframes frame-travel { from { margin-top: 0; } to { margin-top: -640px; } }

/* live iframe previews in the feed (shield blocks interaction, click = link) */
.fmod-ipreview { display: block; max-width: 560px; }
.fmod-ipreview .caps { color: var(--mute); display: block; margin-bottom: 8px; }
.fmod-ipreview .ipreview-window {
  position: relative;
  height: 320px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #f4f4f4;
  transition: border-color 0.3s;
}
.fmod-ipreview:hover .ipreview-window { border-color: var(--ink); }
.fmod-ipreview iframe {
  width: 1280px;
  height: 900px;
  border: 0;
  transform: scale(0.44);
  transform-origin: top left;
  pointer-events: none;
}
.fmod-ipreview .ipreview-shield { position: absolute; inset: 0; }

/* packed media modules */
.fmod-media { display: block; position: relative; }
.fmod-media img, .fmod-media video { width: 100%; height: auto; display: block; }
.fmod-media.fm-media-s { max-width: 280px; }
.fmod-media.fm-media-m { max-width: 460px; }
.fmod-media.fm-media-l { max-width: 720px; }
.fmod-media:hover img, .fmod-media:hover video { opacity: 0.92; }
.fmod-media-cap {
  display: block;
  font-size: 11px;
  color: var(--mute);
  padding-top: 6px;
}

/* text fragments in feed */
.fmod-frag { display: block; max-width: 460px; border-left: 2px solid var(--ink); padding-left: 18px; }
.fmod-frag .caps { color: var(--mute); display: block; margin-bottom: 8px; }
.fmod-frag p { font-size: 17px; font-weight: 300; line-height: 1.55; margin: 0 0 8px; color: var(--ink); }
.fmod-frag:hover p { color: #000; }

/* super-small mini gifs (s·h·o·p, data, captcha) */
.fmod-minis { display: flex; align-items: center; gap: 10px; opacity: 0.8; }
.fmod-minis img { height: 30px; width: auto; display: block; }
.fmod-minis a { display: block; line-height: 0; }
.fmod-minis:hover { opacity: 1; }

/* duo videos — two sizes, switching */
.duo-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.duo-vid { transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); height: auto; }
.duo-vid.duo-big { width: 62%; }
.duo-vid.duo-small { width: 34%; }

/* multimedia project: animated tracking frame */
.mm-frame {
  position: relative;
  border: 1px solid var(--ink);
  padding: 40px 28px;
  overflow: hidden;
}
.mm-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  z-index: 2;
}
.mm-corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.mm-corner.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.mm-corner.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.mm-corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.mm-hline, .mm-vline {
  position: absolute;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 9px);
  pointer-events: none;
  opacity: 0.4;
  z-index: 1;
}
.mm-hline { left: 0; right: 0; height: 1px; top: 30%; background-image: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 9px); }
.mm-vline { top: 0; bottom: 0; width: 1px; left: 50%; background-image: repeating-linear-gradient(0deg, var(--ink) 0 4px, transparent 4px 9px); }
.mm-target {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0.55;
}
.mm-target::before, .mm-target::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.mm-target::before { left: 50%; top: -6px; width: 1px; height: 8px; }
.mm-target::after { top: 50%; left: -6px; height: 1px; width: 8px; }
.mm-target[data-t="1"] { width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0.3; }
.mm-readout {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--mute);
  z-index: 4;
}
.mm-readout::after { content: " " attr(data-xy); }
.mm-frame .blocks { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .mm-hline, .mm-vline, .mm-target { display: none; }
}

/* interactive embed (HIViewer orbit / captcha) */
.embed-interactive .embed-tall { height: 72vh; min-height: 420px; }
.only-mobile { display: none; }
@media (max-width: 760px) {
  .embed-interactive .only-desktop { display: none; }
  .embed-interactive .only-mobile { display: block; }
  .desktop-only-embed { display: none; }
}

/* SHOP — four gifs, one word */
.fmod-shop .shop-row { display: flex; align-items: center; }
.fmod-shop img { height: 90px; width: 100px; object-fit: cover; display: block; }
.fmod-shop a { display: block; }
.fmod-shop img:hover { transform: scale(1.04); }
.fmod-clockframe iframe {
  width: 100%;
  height: 420px;
  border: 1px solid var(--hairline);
  background: #000;
}
.fmod-clocks .clock-row { display: flex; gap: 34px; flex-wrap: wrap; }
.clock-unit { text-align: center; }
.clock-unit canvas { display: block; margin: 0 auto 6px; }
.clock-unit .caps { margin-bottom: 0; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  /* no hamburger on mobile — show the nav inline, small, wrapping to 2 rows */
  #main-nav { display: flex; gap: 6px 14px; padding: 10px 0 12px; }
  #main-nav a { font-size: 10px; letter-spacing: 0.14em; }
  #menu-btn { display: none; }
  .hero { height: calc(100svh - 64px); }
  .works-grid { columns: 1; }
  .past-grid { grid-template-columns: 1fr; }
  #site-header { padding-top: 18px; padding-bottom: 18px; }
  #menu-btn { top: 18px; }
  .feed-mod { margin: 64px 0; }
  .show-row { flex-direction: column; gap: 12px; }
  .show-row .row-thumbs { height: 220px; width: 100%; }
  .show-row .row-shot { flex: 1; width: auto; }
  .show-row .row-shot.shot-lead { flex: 2; width: auto; }
  .fmod-special { padding: 30px 26px; min-width: 100%; }
  .fmod-archive { min-width: 100%; }
  .fmod-clockframe iframe { height: 300px; }
  .fmod-data .data-grid { grid-template-columns: repeat(3, 1fr); }
  .fmod-data .data-grid img { width: 100%; height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-fx]:not(.fx-in) { opacity: 1; transform: none; clip-path: none; }
  .wordmark:hover, .hfx-glitch:hover { animation: none; }
  html { scroll-behavior: auto; }
}